juxscript 1.0.132 → 1.1.2

package/lib/components/datepicker.ts

@@ -0,0 +1,234 @@
+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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,186 @@
+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);
+}