juxscript 1.1.4 → 1.1.6

package/lib/components/base/FormInput.ts

@@ -0,0 +1,227 @@
+import { BaseComponent } from './BaseComponent.js';
+
+/**
+ * Base state interface for all form inputs
+ */
+export interface FormInputState extends Record<string, any> {
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+    errorMessage?: string;
+}
+
+/**
+ * Abstract base class for all form input components
+ * Extends BaseComponent with form-specific functionality
+ */
+export abstract class FormInput<TState extends FormInputState> extends BaseComponent<TState> {
+    protected _inputElement: HTMLElement | null = null;
+    protected _labelElement: HTMLLabelElement | null = null;
+    protected _errorElement: HTMLElement | null = null;
+    protected _onValidate?: (value: any) => boolean | string;
+    protected _hasBeenValidated: boolean = false;  // NEW: Track if user has submitted/validated
+
+    /* ═════════════════════════════════════════════════════════════════
+     * ABSTRACT METHODS (Child must implement)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Get the current value of the input
+     */
+    abstract getValue(): any;
+
+    /**
+     * Set the value of the input
+     */
+    abstract setValue(value: any): this;
+
+    /**
+     * Build the actual input element (input, select, textarea, etc.)
+     */
+    protected abstract _buildInputElement(): HTMLElement;
+
+    /**
+     * Validate the current value
+     */
+    protected abstract _validateValue(value: any): boolean | string;
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON FORM INPUT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    label(value: string): this {
+        this.state.label = value;
+        if (this._labelElement) {
+            this._labelElement.textContent = value;
+        }
+        return this;
+    }
+
+    required(value: boolean): this {
+        this.state.required = value;
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    onValidate(handler: (value: any) => boolean | string): this {
+        this._onValidate = handler;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * VALIDATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Validate the current value and show/hide errors
+     */
+    validate(): boolean {
+        this._hasBeenValidated = true;  // Mark as validated
+        const value = this.getValue();
+        const result = this._validateValue(value);
+
+        if (result === true) {
+            this._clearError();
+            return true;
+        } else {
+            this._showError(result as string);
+            return false;
+        }
+    }
+
+    /**
+     * Check if current value is valid without showing errors
+     */
+    isValid(): boolean {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
+
+    /**
+     * Show error message
+     */
+    protected _showError(message: string): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = message;
+            this._errorElement.style.display = 'block';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.add('jux-input-invalid');
+        }
+
+        this.state.errorMessage = message;
+    }
+
+    /**
+     * Clear error message
+     */
+    protected _clearError(): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = '';
+            this._errorElement.style.display = 'none';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.remove('jux-input-invalid');
+        }
+
+        this.state.errorMessage = undefined;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Build label element
+     */
+    protected _renderLabel(): HTMLLabelElement {
+        const { label, required } = this.state;
+
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-input-label';
+        labelEl.htmlFor = `${this._id}-input`;
+        labelEl.textContent = label;
+
+        if (required) {
+            const requiredSpan = document.createElement('span');
+            requiredSpan.className = 'jux-input-required';
+            requiredSpan.textContent = ' *';
+            labelEl.appendChild(requiredSpan);
+        }
+
+        this._labelElement = labelEl;
+        return labelEl;
+    }
+
+    /**
+     * Build error element
+     */
+    protected _renderError(): HTMLElement {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'jux-input-error';
+        errorEl.id = `${this._id}-error`;
+        errorEl.style.display = 'none';
+
+        this._errorElement = errorEl;
+        return errorEl;
+    }
+
+    /**
+     * Wire up two-way sync for value property
+     */
+    protected _wireFormSync(inputElement: HTMLElement, eventName: string = 'input'): void {
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            // Default transforms
+            const transformToState = toState || ((v: any) => v);
+            const transformToComponent = toComponent || ((v: any) => v);
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+
+            // Component → State
+            inputElement.addEventListener(eventName, () => {
+                if (isUpdating) return;
+                isUpdating = true;
+
+                const value = this.getValue();
+                const transformed = transformToState(value);
+                this._clearError();
+
+                stateObj.set(transformed);
+
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputElement.addEventListener(eventName, () => {
+                this._clearError();
+            });
+        }
+
+        // Only validate on blur IF the field has been validated before (e.g., after submit)
+        inputElement.addEventListener('blur', () => {
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
+        });
+    }
+}

package/lib/components/button.d.ts

@@ -0,0 +1,48 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface ButtonOptions {
+    label?: string;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    loading?: boolean;
+    iconPosition?: 'left' | 'right';
+    fullWidth?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    style?: string;
+    class?: string;
+}
+type ButtonState = {
+    label: string;
+    icon: string;
+    variant: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    iconPosition: string;
+    fullWidth: boolean;
+    type: 'button' | 'submit' | 'reset';
+    style: string;
+    class: string;
+};
+export declare class Button extends BaseComponent<ButtonState> {
+    private _buttonElement;
+    constructor(id: string, options?: ButtonOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    label(value: string): this;
+    icon(value: string): this;
+    variant(value: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string): this;
+    size(value: 'small' | 'medium' | 'large'): this;
+    iconPosition(value: 'left' | 'right'): this;
+    fullWidth(value: boolean): this;
+    type(value: 'button' | 'submit' | 'reset'): this;
+    /**
+     * Override visible() to update the actual button element
+     */
+    visible(value: boolean): this;
+    render(targetId?: string): this;
+}
+export declare function button(id: string, options?: ButtonOptions): Button;
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAkB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAK3G,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAK/C,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAK3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAShD;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAkDhC;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}

package/lib/components/button.js

@@ -0,0 +1,121 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['click']; // ✅ Button fires click events
+export class Button extends BaseComponent {
+    constructor(id, options) {
+        const opts = options || {};
+        super(id, {
+            label: opts.label ?? 'Button',
+            icon: opts.icon ?? '',
+            variant: opts.variant ?? 'primary',
+            size: opts.size ?? 'medium',
+            disabled: opts.disabled ?? false,
+            loading: opts.loading ?? false,
+            iconPosition: opts.iconPosition ?? 'left',
+            fullWidth: opts.fullWidth ?? false,
+            type: opts.type ?? 'button',
+            style: opts.style ?? '',
+            class: opts.class ?? ''
+        });
+        this._buttonElement = null; // ✅ Store button reference
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent
+    label(value) {
+        this.state.label = value;
+        return this;
+    }
+    icon(value) {
+        this.state.icon = value;
+        return this;
+    }
+    variant(value) {
+        this.state.variant = value;
+        return this;
+    }
+    size(value) {
+        this.state.size = value;
+        return this;
+    }
+    iconPosition(value) {
+        this.state.iconPosition = value;
+        return this;
+    }
+    fullWidth(value) {
+        this.state.fullWidth = value;
+        return this;
+    }
+    type(value) {
+        this.state.type = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Override visible() to update the actual button element
+     */
+    visible(value) {
+        this.state.visible = value;
+        // Update the button element directly, not the container
+        if (this._buttonElement) {
+            this._buttonElement.style.display = value ? '' : 'none';
+        }
+        return this;
+    }
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { label, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
+        const button = document.createElement('button');
+        this._buttonElement = button; // ✅ Store reference
+        button.className = `jux-button jux-button-${variant} jux-button-${size}`;
+        button.id = this._id;
+        button.disabled = disabled || loading;
+        if (className)
+            button.className += ` ${className}`;
+        if (style)
+            button.setAttribute('style', style);
+        if (icon && iconPosition === 'left') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-button-icon';
+            iconEl.appendChild(renderIcon(icon));
+            button.appendChild(iconEl);
+        }
+        const textEl = document.createElement('span');
+        textEl.textContent = loading ? 'Loading...' : label;
+        button.appendChild(textEl);
+        if (icon && iconPosition === 'right') {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-button-icon';
+            iconEl.appendChild(renderIcon(icon));
+            button.appendChild(iconEl);
+        }
+        button.addEventListener('click', (e) => {
+            if (!disabled && !loading) {
+                this._triggerCallback('click', e);
+            }
+        });
+        this._wireStandardEvents(button);
+        this._wireAllSyncs();
+        container.appendChild(button);
+        requestAnimationFrame(() => {
+            if (window.lucide) {
+                window.lucide.createIcons();
+            }
+        });
+        return this;
+    }
+}
+export function button(id, options) {
+    return new Button(id, options);
+}

package/lib/components/button.ts

@@ -0,0 +1,178 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;  // ✅ Button fires click events
+
+export interface ButtonOptions {
+  label?: string;
+  icon?: string;
+  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string;
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  loading?: boolean;
+  iconPosition?: 'left' | 'right';
+  fullWidth?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  style?: string;
+  class?: string;
+}
+
+type ButtonState = {
+  label: string;
+  icon: string;
+  variant: string;
+  size: string;
+  disabled: boolean;
+  loading: boolean;
+  iconPosition: string;
+  fullWidth: boolean;
+  type: 'button' | 'submit' | 'reset';
+  style: string;
+  class: string;
+};
+
+export class Button extends BaseComponent<ButtonState> {
+  private _buttonElement: HTMLButtonElement | null = null; // ✅ Store button reference
+
+  constructor(id: string, options?: ButtonOptions) {
+    const opts = options || {};
+
+    super(id, {
+      label: opts.label ?? 'Button',
+      icon: opts.icon ?? '',
+      variant: opts.variant ?? 'primary',
+      size: opts.size ?? 'medium',
+      disabled: opts.disabled ?? false,
+      loading: opts.loading ?? false,
+      iconPosition: opts.iconPosition ?? 'left',
+      fullWidth: opts.fullWidth ?? false,
+      type: opts.type ?? 'button',
+      style: opts.style ?? '',
+      class: opts.class ?? ''
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
+
+  label(value: string): this {
+    this.state.label = value;
+    return this;
+  }
+
+  icon(value: string): this {
+    this.state.icon = value;
+    return this;
+  }
+
+  variant(value: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  size(value: 'small' | 'medium' | 'large'): this {
+    this.state.size = value;
+    return this;
+  }
+
+  iconPosition(value: 'left' | 'right'): this {
+    this.state.iconPosition = value;
+    return this;
+  }
+
+  fullWidth(value: boolean): this {
+    this.state.fullWidth = value;
+    return this;
+  }
+
+  type(value: 'button' | 'submit' | 'reset'): this {
+    this.state.type = value;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  /**
+   * Override visible() to update the actual button element
+   */
+  visible(value: boolean): this {
+    (this.state as any).visible = value;
+
+    // Update the button element directly, not the container
+    if (this._buttonElement) {
+      this._buttonElement.style.display = value ? '' : 'none';
+    }
+
+    return this;
+  }
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+    const { label, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
+
+    const button = document.createElement('button');
+    this._buttonElement = button; // ✅ Store reference
+    button.className = `jux-button jux-button-${variant} jux-button-${size}`;
+    button.id = this._id;
+    button.disabled = disabled || loading;
+
+    if (className) button.className += ` ${className}`;
+    if (style) button.setAttribute('style', style);
+
+    if (icon && iconPosition === 'left') {
+      const iconEl = document.createElement('span');
+      iconEl.className = 'jux-button-icon';
+      iconEl.appendChild(renderIcon(icon));
+      button.appendChild(iconEl);
+    }
+
+    const textEl = document.createElement('span');
+    textEl.textContent = loading ? 'Loading...' : label;
+    button.appendChild(textEl);
+
+    if (icon && iconPosition === 'right') {
+      const iconEl = document.createElement('span');
+      iconEl.className = 'jux-button-icon';
+      iconEl.appendChild(renderIcon(icon));
+      button.appendChild(iconEl);
+    }
+
+    button.addEventListener('click', (e) => {
+      if (!disabled && !loading) {
+        this._triggerCallback('click', e);
+      }
+    });
+
+    this._wireStandardEvents(button);
+    this._wireAllSyncs();
+
+    container.appendChild(button);
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
+    return this;
+  }
+}
+
+export function button(id: string, options?: ButtonOptions): Button {
+  return new Button(id, options);
+}

package/lib/components/card.d.ts

@@ -0,0 +1,34 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface CardOptions {
+    title?: string;
+    content?: string;
+    footer?: string;
+    variant?: string;
+    hoverable?: boolean;
+    icon?: string;
+    style?: string;
+    class?: string;
+}
+type CardState = {
+    title: string;
+    content: string;
+    footer: string;
+    variant: string;
+    hoverable: boolean;
+    icon: string;
+    style: string;
+    class: string;
+};
+export declare class Card extends BaseComponent<CardState> {
+    constructor(id: string, options?: CardOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    title(value: string): this;
+    content(value: string): this;
+    footer(value: string): this;
+    icon(value: string): this;
+    render(targetId?: string): this;
+}
+export declare function card(id: string, options?: CardOptions): Card;
+export {};
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAajD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASzB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAuFhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}