juxscript 1.1.2 → 1.1.4

package/lib/components/datepicker.ts

@@ -1,234 +0,0 @@
-import { FormInput, FormInputState } from './base/FormInput.js';
-import { renderIcon } from './icons.js';
-
-// 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 FormInputState {
-    value: string;
-    placeholder: string;
-    min?: string;
-    max?: string;
-}
-
-export class DatePicker extends FormInput<DatePickerState> {
-    constructor(id: string, options: DatePickerOptions = {}) {
-        super(id, {
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select a date',
-            label: options.label ?? '',
-            required: options.required ?? false,
-            disabled: options.disabled ?? false,
-            name: options.name ?? id,
-            min: options.min,
-            max: options.max,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            errorMessage: undefined
-        });
-
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-
-    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;
-    }
-
-    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): 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');
-
-        // 🎯 Fire change event when date changes
-        inputEl.addEventListener('change', () => {
-            const input = inputEl as HTMLInputElement;
-            this._triggerCallback('change', input.value);
-        });
-
-        // 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.ts

@@ -1,172 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['confirm', 'cancel'] as const;
-
-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 class Dialog extends BaseComponent<DialogState> {
-    private _dialog: HTMLElement | null = null;
-    private _overlay: HTMLElement | null = null;
-
-    constructor(id: string, options: DialogOptions = {}) {
-        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 ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    title(value: string): this {
-        this.state.title = value;
-        return this;
-    }
-
-    message(value: string): this {
-        this.state.message = value;
-        return this;
-    }
-
-    confirmText(value: string): this {
-        this.state.confirmText = value;
-        return this;
-    }
-
-    cancelText(value: string): this {
-        this.state.cancelText = value;
-        return this;
-    }
-
-    variant(value: 'default' | 'danger' | 'warning'): this {
-        this.state.variant = value;
-        return this;
-    }
-
-    open(): this {
-        this.state.open = true;
-        if (this._overlay) {
-            this._overlay.style.display = 'flex';
-        }
-        return this;
-    }
-
-    close(): this {
-        this.state.open = false;
-        if (this._overlay) {
-            this._overlay.style.display = 'none';
-        }
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        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: string, options: DialogOptions = {}): Dialog {
-    return new Dialog(id, options);
-}

package/lib/components/divider.ts

@@ -1,100 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface DividerOptions {
-    text?: string;
-    variant?: 'default' | 'dashed' | 'dotted';
-    margin?: string;
-    style?: string;
-    class?: string;
-}
-
-type DividerState = {
-    text: string;
-    variant: string;
-    margin: string;
-    style: string;
-    class: string;
-    orientation: string;
-};
-
-export class Divider extends BaseComponent<DividerState> {
-    constructor(id: string = `divider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, options: DividerOptions = {}) {
-        super(id, {
-            text: options.text ?? '',
-            variant: options.variant ?? 'default',
-            margin: options.margin ?? '1rem 0',
-            style: options.style ?? '',
-            class: options.class ?? '',
-            orientation: 'horizontal'
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    text(value: string): this {
-        this.state.text = value;
-        return this;
-    }
-
-    orientation(value: 'horizontal' | 'vertical'): this {
-        this.state.orientation = value;
-        return this;
-    }
-
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    render(targetId?: string): this {
-        const container = this._setupContainer(targetId);
-
-        const { text, variant, margin, style, class: className } = this.state;
-
-        const divider = document.createElement('div');
-        divider.className = `jux-divider jux-divider-${variant}`;
-        divider.id = this._id;
-        divider.style.margin = margin;
-        if (className) divider.className += ` ${className}`;
-        if (style) divider.setAttribute('style', `${divider.getAttribute('style')}; ${style}`);
-
-        if (text) {
-            const textEl = document.createElement('span');
-            textEl.className = 'jux-divider-text';
-            textEl.textContent = text;
-            divider.appendChild(textEl);
-        }
-
-        this._wireStandardEvents(divider);
-        container.appendChild(divider);
-
-        return this;
-    }
-
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Divider.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
-    }
-}
-
-// ✅ ID is now optional - auto-generated if not provided
-export function divider(options: DividerOptions = {}): Divider {
-    return new Divider(undefined, options);
-}

package/lib/components/dropdown.ts

@@ -1,186 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['select'] as const;
-
-export interface DropdownItem {
-    label?: string;
-    icon?: string;
-    divider?: boolean;
-    click?: () => void;
-}
-
-export interface DropdownOptions {
-    triggerLabel?: string;
-    items?: DropdownItem[];
-    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-    style?: string;
-    class?: string;
-}
-
-type DropdownState = {
-    triggerLabel: string;
-    items: DropdownItem[];
-    position: string;
-    open: boolean;
-    style: string;
-    class: string;
-};
-
-export class Dropdown extends BaseComponent<DropdownState> {
-    private _dropdown: HTMLElement | null = null;
-    private _menu: HTMLElement | null = null;
-
-    constructor(id: string, options: DropdownOptions = {}) {
-        super(id, {
-            triggerLabel: options.triggerLabel ?? 'Menu',
-            items: options.items ?? [],
-            position: options.position ?? 'bottom-left',
-            open: false,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    triggerLabel(value: string): this {
-        this.state.triggerLabel = value;
-        return this;
-    }
-
-    items(value: DropdownItem[]): this {
-        this.state.items = value;
-        return this;
-    }
-
-    position(value: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'): this {
-        this.state.position = value;
-        return this;
-    }
-
-    open(): this {
-        this.state.open = true;
-        if (this._menu) {
-            this._menu.style.display = 'block';
-        }
-        return this;
-    }
-
-    close(): this {
-        this.state.open = false;
-        if (this._menu) {
-            this._menu.style.display = 'none';
-        }
-        return this;
-    }
-
-    toggle(): this {
-        return this.state.open ? this.close() : this.open();
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        const container = this._setupContainer(targetId);
-
-        const { triggerLabel, items, position, style, class: className } = this.state;
-
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-dropdown';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        // Trigger button
-        const triggerBtn = document.createElement('button');
-        triggerBtn.className = 'jux-dropdown-trigger';
-        triggerBtn.textContent = triggerLabel;
-        triggerBtn.type = 'button';
-
-        // Dropdown menu
-        const menu = document.createElement('div');
-        menu.className = `jux-dropdown-menu jux-dropdown-${position}`;
-        menu.style.display = 'none';
-        this._menu = menu;
-
-        items.forEach(item => {
-            if (item.divider) {
-                const divider = document.createElement('div');
-                divider.className = 'jux-dropdown-divider';
-                menu.appendChild(divider);
-            } else {
-                const menuItem = document.createElement('button');
-                menuItem.className = 'jux-dropdown-item';
-                menuItem.type = 'button';
-
-                if (item.icon) {
-                    const icon = document.createElement('span');
-                    icon.className = 'jux-dropdown-icon';
-                    icon.textContent = item.icon;
-                    menuItem.appendChild(icon);
-                }
-
-                if (item.label) {
-                    const label = document.createElement('span');
-                    label.textContent = item.label;
-                    menuItem.appendChild(label);
-                }
-
-                menuItem.addEventListener('click', () => {
-                    // 🎯 Fire the select callback event
-                    this._triggerCallback('select', item);
-
-                    // Then fire item-specific click handler
-                    if (item.click) {
-                        item.click();
-                    }
-
-                    this.close();
-                });
-
-                menu.appendChild(menuItem);
-            }
-        });
-
-        // Toggle on trigger click
-        triggerBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggle();
-        });
-
-        // Close on outside click
-        document.addEventListener('click', (e) => {
-            if (this._dropdown && !this._dropdown.contains(e.target as Node)) {
-                this.close();
-            }
-        });
-
-        wrapper.appendChild(triggerBtn);
-        wrapper.appendChild(menu);
-
-        this._wireStandardEvents(wrapper);
-
-        container.appendChild(wrapper);
-        this._dropdown = wrapper;
-
-        return this;
-    }
-}
-
-export function dropdown(id: string, options: DropdownOptions = {}): Dropdown {
-    return new Dropdown(id, options);
-}