juxscript 1.1.239 → 1.1.243

package/lib/components/datepicker.js

@@ -1,193 +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'];
-export class DatePicker extends BaseComponent {
-    constructor(id, options = {}) {
-        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,
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select a date',
-            min: options.min,
-            max: options.max
-        });
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    value(value) {
-        return this.setValue(value);
-    }
-    placeholder(value) {
-        this.state.placeholder = value;
-        return this;
-    }
-    min(value) {
-        this.state.min = value;
-        return this;
-    }
-    max(value) {
-        this.state.max = 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;
-    }
-    getDate() {
-        if (!this.state.value)
-            return null;
-        const date = new Date(this.state.value);
-        return isNaN(date.getTime()) ? null : date;
-    }
-    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, min, max } = this.state;
-        if (required && !value) {
-            return 'Please select a date';
-        }
-        if (value) {
-            const date = new Date(value);
-            if (isNaN(date.getTime())) {
-                return 'Invalid date';
-            }
-            if (min) {
-                const minDate = new Date(min);
-                if (date < minDate) {
-                    return `Date must be on or after ${min}`;
-                }
-            }
-            if (max) {
-                const maxDate = new Date(max);
-                if (date > maxDate) {
-                    return `Date must be on or before ${max}`;
-                }
-            }
-        }
-        if (this._onValidate) {
-            const result = this._onValidate(value);
-            if (result !== true) {
-                return result || 'Invalid date';
-            }
-        }
-        return true;
-    }
-    _buildInputElement() {
-        const { value, placeholder, required, disabled, name, min, max } = this.state;
-        const input = document.createElement('input');
-        input.type = 'date';
-        input.className = 'jux-input-element jux-datepicker-input';
-        input.id = `${this._id}-input`;
-        input.name = name;
-        input.value = value;
-        input.placeholder = placeholder;
-        input.required = required;
-        input.disabled = disabled;
-        if (min)
-            input.min = min;
-        if (max)
-            input.max = max;
-        return input;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { style, class: className } = this.state;
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-input jux-datepicker';
-        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 jux-datepicker-container';
-        // Calendar icon
-        const iconEl = document.createElement('span');
-        iconEl.className = 'jux-input-icon';
-        iconEl.appendChild(renderIcon('calendar'));
-        inputContainer.appendChild(iconEl);
-        // Date input
-        const inputEl = this._buildInputElement();
-        this._inputElement = inputEl;
-        inputContainer.appendChild(inputEl);
-        wrapper.appendChild(inputContainer);
-        // Error element
-        wrapper.appendChild(this._renderError());
-        // Wire events
-        this._wireStandardEvents(wrapper);
-        this._wireFormSync(inputEl, 'change');
-        // Find the existing change listener and replace with:
-        inputEl.addEventListener('change', (e) => {
-            const date = inputEl.value;
-            this.state.value = date;
-            this._triggerCallback('change', date, e, this);
-        });
-        // 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);
-        return this;
-    }
-}
-export function datepicker(id, options = {}) {
-    return new DatePicker(id, options);
-}

package/lib/components/datepicker.ts

@@ -1,251 +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 DatePickerOptions {
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    min?: string;
-    max?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (value: string) => boolean | string;
-}
-
-interface DatePickerState extends BaseState {
-    value: string;
-    placeholder: string;
-    min?: string;
-    max?: string;
-}
-
-export class DatePicker extends BaseComponent<DatePickerState> {
-    constructor(id: string, options: DatePickerOptions = {}) {
-        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,
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select a date',
-            min: options.min,
-            max: options.max
-        });
-
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    value(value: string): this {
-        return this.setValue(value);
-    }
-
-    placeholder(value: string): this {
-        this.state.placeholder = value;
-        return this;
-    }
-
-    min(value: string): this {
-        this.state.min = value;
-        return this;
-    }
-
-    max(value: string): this {
-        this.state.max = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    getValue(): string {
-        return this.state.value;
-    }
-
-    setValue(value: string): this {
-        this.state.value = value;
-        if (this._inputElement) {
-            (this._inputElement as HTMLInputElement).value = value;
-        }
-        return this;
-    }
-
-    getDate(): Date | null {
-        if (!this.state.value) return null;
-        const date = new Date(this.state.value);
-        return isNaN(date.getTime()) ? null : date;
-    }
-
-    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(value: string): boolean | string {
-        const { required, min, max } = this.state;
-
-        if (required && !value) {
-            return 'Please select a date';
-        }
-
-        if (value) {
-            const date = new Date(value);
-
-            if (isNaN(date.getTime())) {
-                return 'Invalid date';
-            }
-
-            if (min) {
-                const minDate = new Date(min);
-                if (date < minDate) {
-                    return `Date must be on or after ${min}`;
-                }
-            }
-
-            if (max) {
-                const maxDate = new Date(max);
-                if (date > maxDate) {
-                    return `Date must be on or before ${max}`;
-                }
-            }
-        }
-
-        if (this._onValidate) {
-            const result = this._onValidate(value);
-            if (result !== true) {
-                return result || 'Invalid date';
-            }
-        }
-
-        return true;
-    }
-
-    protected _buildInputElement(): HTMLElement {
-        const { value, placeholder, required, disabled, name, min, max } = this.state;
-
-        const input = document.createElement('input');
-        input.type = 'date';
-        input.className = 'jux-input-element jux-datepicker-input';
-        input.id = `${this._id}-input`;
-        input.name = name!;
-        input.value = value;
-        input.placeholder = placeholder;
-        input.required = required!;
-        input.disabled = disabled!;
-
-        if (min) input.min = min;
-        if (max) input.max = max;
-
-        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-input jux-datepicker';
-        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 jux-datepicker-container';
-
-        // Calendar icon
-        const iconEl = document.createElement('span');
-        iconEl.className = 'jux-input-icon';
-        iconEl.appendChild(renderIcon('calendar'));
-        inputContainer.appendChild(iconEl);
-
-        // Date input
-        const inputEl = this._buildInputElement();
-        this._inputElement = inputEl;
-        inputContainer.appendChild(inputEl);
-        wrapper.appendChild(inputContainer);
-
-        // Error element
-        wrapper.appendChild(this._renderError());
-
-        // Wire events
-        this._wireStandardEvents(wrapper);
-        this._wireFormSync(inputEl, 'change');
-
-        // Find the existing change listener and replace with:
-        inputEl.addEventListener('change', (e) => {
-            const date = (inputEl as HTMLInputElement).value;
-            this.state.value = date;
-            this._triggerCallback('change', date, e, this);
-        });
-
-        // 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 datepicker(id: string, options: DatePickerOptions = {}): DatePicker {
-    return new DatePicker(id, options);
-}

package/lib/components/dialog.d.ts

@@ -1,39 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface DialogOptions {
-    title?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    variant?: 'default' | 'danger' | 'warning';
-    style?: string;
-    class?: string;
-}
-type DialogState = {
-    title: string;
-    message: string;
-    confirmText: string;
-    cancelText: string;
-    variant: string;
-    open: boolean;
-    style: string;
-    class: string;
-};
-export declare class Dialog extends BaseComponent<DialogState> {
-    private _dialog;
-    private _overlay;
-    constructor(id: string, options?: DialogOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    title(value: string): this;
-    message(value: string): this;
-    confirmText(value: string): this;
-    cancelText(value: string): this;
-    variant(value: 'default' | 'danger' | 'warning'): this;
-    open(): this;
-    close(): this;
-    update(prop: string, value: any): void;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function dialog(id: string, options?: DialogOptions): Dialog;
-export {};
-//# sourceMappingURL=dialog.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,aAAa;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IAClD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAanD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI;IAKtD,IAAI,IAAI,IAAI;IASZ,KAAK,IAAI,IAAI;IASb,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAkErE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAEtE"}

package/lib/components/dialog.js

@@ -1,131 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['confirm', 'cancel'];
-export class Dialog extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            title: options.title ?? 'Confirm',
-            message: options.message ?? 'Are you sure?',
-            confirmText: options.confirmText ?? 'Confirm',
-            cancelText: options.cancelText ?? 'Cancel',
-            variant: options.variant ?? 'default',
-            open: false,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._dialog = null;
-        this._overlay = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    title(value) {
-        this.state.title = value;
-        return this;
-    }
-    message(value) {
-        this.state.message = value;
-        return this;
-    }
-    confirmText(value) {
-        this.state.confirmText = value;
-        return this;
-    }
-    cancelText(value) {
-        this.state.cancelText = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    open() {
-        this.state.open = true;
-        if (this._overlay) {
-            this._overlay.style.display = 'flex';
-        }
-        this._triggerCallback('open', true, null, this);
-        return this;
-    }
-    close() {
-        this.state.open = false;
-        if (this._overlay) {
-            this._overlay.style.display = 'none';
-        }
-        this._triggerCallback('close', false, null, this);
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const { title, message, confirmText, cancelText, variant, style, class: className } = this.state;
-        // Overlay
-        const overlay = document.createElement('div');
-        overlay.className = 'jux-dialog-overlay';
-        overlay.style.display = 'none';
-        this._overlay = overlay;
-        // Dialog
-        const dialog = document.createElement('div');
-        dialog.className = `jux-dialog jux-dialog-${variant}`;
-        dialog.id = this._id;
-        if (className)
-            dialog.className += ` ${className}`;
-        if (style)
-            dialog.setAttribute('style', style);
-        this._dialog = dialog;
-        // Title
-        const titleEl = document.createElement('div');
-        titleEl.className = 'jux-dialog-title';
-        titleEl.textContent = title;
-        dialog.appendChild(titleEl);
-        // Message
-        const messageEl = document.createElement('div');
-        messageEl.className = 'jux-dialog-message';
-        messageEl.textContent = message;
-        dialog.appendChild(messageEl);
-        // Actions
-        const actions = document.createElement('div');
-        actions.className = 'jux-dialog-actions';
-        const cancelBtn = document.createElement('button');
-        cancelBtn.className = 'jux-dialog-button jux-dialog-button-cancel';
-        cancelBtn.textContent = cancelText;
-        cancelBtn.addEventListener('click', () => {
-            this._triggerCallback('cancel');
-            this.close();
-        });
-        const confirmBtn = document.createElement('button');
-        confirmBtn.className = `jux-dialog-button jux-dialog-button-confirm jux-dialog-button-${variant}`;
-        confirmBtn.textContent = confirmText;
-        confirmBtn.addEventListener('click', () => {
-            this._triggerCallback('confirm');
-            this.close();
-        });
-        actions.appendChild(cancelBtn);
-        actions.appendChild(confirmBtn);
-        dialog.appendChild(actions);
-        // Close on overlay click
-        overlay.addEventListener('click', (e) => {
-            if (e.target === overlay) {
-                this._triggerCallback('cancel');
-                this.close();
-            }
-        });
-        overlay.appendChild(dialog);
-        document.body.appendChild(overlay);
-        return this;
-    }
-}
-export function dialog(id, options = {}) {
-    return new Dialog(id, options);
-}