juxscript 1.1.2 → 1.1.4

package/lib/components/checkbox.ts

@@ -1,242 +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 CheckboxOptions {
-    checked?: boolean;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    value?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (checked: boolean) => boolean | string;
-}
-
-interface CheckboxState extends FormInputState {
-    checked: boolean;
-    value: string;
-}
-
-export class Checkbox extends FormInput<CheckboxState> {
-    constructor(id: string, options: CheckboxOptions = {}) {
-        super(id, {
-            checked: options.checked ?? false,
-            value: options.value ?? 'on',
-            label: options.label ?? '',
-            required: options.required ?? false,
-            disabled: options.disabled ?? false,
-            name: options.name ?? id,
-            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()
-
-    checked(value: boolean): this {
-        return this.setValue(value);
-    }
-
-    value(value: string): this {
-        this.state.value = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    getValue(): boolean {
-        return this.state.checked;
-    }
-
-    setValue(value: boolean): this {
-        this.state.checked = value;
-        if (this._inputElement) {
-            (this._inputElement as HTMLInputElement).checked = value;
-        }
-        return this;
-    }
-
-    protected _validateValue(checked: boolean): boolean | string {
-        const { required } = this.state;
-
-        if (required && !checked) {
-            return 'This field must be checked';
-        }
-
-        if (this._onValidate) {
-            const result = this._onValidate(checked);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-
-        return true;
-    }
-
-    protected _buildInputElement(): HTMLElement {
-        const { checked, value, required, disabled, name } = this.state;
-
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.className = 'jux-checkbox-input';
-        input.id = `${this._id}-input`;
-        input.name = name;
-        input.value = value;
-        input.checked = checked;
-        input.required = required;
-        input.disabled = disabled;
-
-        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-checkbox';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        // Checkbox container
-        const checkboxContainer = document.createElement('label');
-        checkboxContainer.className = 'jux-checkbox-container';
-        checkboxContainer.htmlFor = `${this._id}-input`;
-
-        // Input element
-        const inputEl = this._buildInputElement() as HTMLInputElement;
-        this._inputElement = inputEl;
-        checkboxContainer.appendChild(inputEl);
-
-        // Checkmark (custom styled)
-        const checkmark = document.createElement('span');
-        checkmark.className = 'jux-checkbox-checkmark';
-        checkmark.appendChild(renderIcon('check'));
-        checkboxContainer.appendChild(checkmark);
-
-        // Label text
-        if (this.state.label) {
-            const labelText = document.createElement('span');
-            labelText.className = 'jux-checkbox-label-text';
-            labelText.textContent = this.state.label;
-            if (this.state.required) {
-                const requiredSpan = document.createElement('span');
-                requiredSpan.className = 'jux-input-required';
-                requiredSpan.textContent = ' *';
-                labelText.appendChild(requiredSpan);
-            }
-            checkboxContainer.appendChild(labelText);
-        }
-
-        wrapper.appendChild(checkboxContainer);
-
-        // Error element
-        wrapper.appendChild(this._renderError());
-
-        // Wire events
-        this._wireStandardEvents(wrapper);
-
-        // Wire checkbox-specific sync (maps 'checked' to 'value' property for consistency)
-        const valueSync = this._syncBindings.find(b => b.property === 'value' || b.property === 'checked');
-
-        if (valueSync) {
-            const { stateObj, toState, toComponent } = valueSync;
-
-            const transformToState = toState || ((v: boolean) => v);
-            const transformToComponent = toComponent || ((v: any) => Boolean(v));
-
-            let isUpdating = false;
-
-            // State → Component
-            stateObj.subscribe((val: any) => {
-                if (isUpdating) return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-
-            // Component → State
-            inputEl.addEventListener('change', () => {
-                if (isUpdating) return;
-                isUpdating = true;
-
-                const checked = inputEl.checked;
-                this.state.checked = checked;
-                this._clearError();
-
-                const transformed = transformToState(checked);
-                stateObj.set(transformed);
-
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', checked);
-
-                setTimeout(() => { isUpdating = false; }, 0);
-            });
-        } else {
-            // Default behavior without sync
-            inputEl.addEventListener('change', () => {
-                this.state.checked = inputEl.checked;
-                this._clearError();
-
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', inputEl.checked);
-            });
-        }
-
-        // Always add blur validation
-        inputEl.addEventListener('blur', () => {
-            this.validate();
-        });
-
-        // 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 checkbox(id: string, options: CheckboxOptions = {}): Checkbox {
-    return new Checkbox(id, options);
-}

package/lib/components/code.ts

@@ -1,123 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface CodeOptions {
-  code?: string;
-  language?: string;
-  style?: string;
-  class?: string;
-}
-
-type CodeState = {
-  code: string;
-  language: string;
-  style: string;
-  class: string;
-};
-
-export class Code extends BaseComponent<CodeState> {
-  constructor(id: string, options: CodeOptions = {}) {
-    super(id, {
-      code: options.code ?? '',
-      language: options.language ?? 'javascript',
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  // ✅ Inherited from BaseComponent
-
-  code(value: string): this {
-    this.state.code = value;
-    return this;
-  }
-
-  language(value: string): this {
-    this.state.language = value;
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string): this {
-    const container = this._setupContainer(targetId);
-
-    const { code, language, style, class: className } = this.state;
-
-    const wrapper = document.createElement('div');
-    wrapper.className = 'jux-code';
-    wrapper.id = this._id;
-    if (className) wrapper.className += ` ${className}`;
-    if (style) wrapper.setAttribute('style', style);
-
-    const pre = document.createElement('pre');
-    const codeEl = document.createElement('code');
-    codeEl.className = `language-${language}`;
-    codeEl.textContent = code;
-    pre.appendChild(codeEl);
-    wrapper.appendChild(pre);
-
-    this._wireStandardEvents(wrapper);
-
-    // Wire sync bindings
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'code') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          codeEl.textContent = transformed;
-          this.state.code = transformed;
-
-          if ((window as any).Prism) {
-            (window as any).Prism.highlightElement(codeEl);
-          }
-        });
-      }
-      else if (property === 'language') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          codeEl.className = `language-${transformed}`;
-          this.state.language = transformed;
-
-          if ((window as any).Prism) {
-            (window as any).Prism.highlightElement(codeEl);
-          }
-        });
-      }
-    });
-
-    container.appendChild(wrapper);
-
-    requestAnimationFrame(() => {
-      if ((window as any).Prism) {
-        (window as any).Prism.highlightElement(codeEl);
-      }
-    });
-
-    return this;
-  }
-}
-
-export function code(id: string, options: CodeOptions = {}): Code {
-  return new Code(id, options);
-}

package/lib/components/container.ts

@@ -1,140 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions - Container is a layout wrapper that can be clicked
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['click'] as const;
-
-/**
- * Container options
- */
-export interface ContainerOptions {
-  class?: string;
-  style?: string;
-  direction?: 'row' | 'column';
-  gap?: string | number;
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
-}
-
-/**
- * Container state
- */
-type ContainerState = {
-  class: string;
-  style: string;
-  direction?: 'row' | 'column';
-  gap?: string | number;
-  align?: string;
-  justify?: string;
-};
-
-/**
- * Container component - a simple div container for grouping elements
- */
-export class Container extends BaseComponent<ContainerState> {
-  constructor(id: string, options: ContainerOptions = {}) {
-    super(id, {
-      class: options.class ?? '',
-      style: options.style ?? '',
-      direction: options.direction,
-      gap: options.gap,
-      align: options.align,
-      justify: options.justify
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  // ✅ Inherited from BaseComponent:
-  // - style(), class()
-  // - bind(), sync(), renderTo()
-  // - addClass(), removeClass(), toggleClass()
-  // - visible(), show(), hide()
-  // - attr(), attrs(), removeAttr()
-  // - disabled(), enable(), disable()
-
-  direction(value: 'row' | 'column'): this {
-    this.state.direction = value;
-    return this;
-  }
-
-  gap(value: string | number): this {
-    this.state.gap = value;
-    return this;
-  }
-
-  align(value: 'start' | 'center' | 'end' | 'stretch'): this {
-    this.state.align = value;
-    return this;
-  }
-
-  justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this {
-    this.state.justify = value;
-    return this;
-  }
-
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(targetId?: string): this {
-    const container = this._setupContainer(targetId);
-
-    const { class: className, style, direction, gap, align, justify } = this.state;
-
-    const div = document.createElement('div');
-    div.id = this._id;
-
-    // Always include jux-container class, append custom classes
-    div.className = className ? `jux-container ${className}` : 'jux-container';
-
-    // Only apply flex styles if any flex properties are set
-    const usesFlexbox = direction || gap !== undefined || align || justify;
-
-    let computedStyle = style;
-
-    if (usesFlexbox) {
-      const flexStyles: string[] = ['display: flex', 'width: auto'];
-
-      if (direction) flexStyles.push(`flex-direction: ${direction}`);
-
-      if (gap !== undefined) {
-        const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
-        flexStyles.push(`gap: ${gapValue}`);
-      }
-      // Only set align-items if explicitly specified
-      if (align) flexStyles.push(`align-items: ${align}`);
-      // Only set justify-content if explicitly specified
-      if (justify) flexStyles.push(`justify-content: ${justify}`);
-
-      computedStyle = `${flexStyles.join('; ')}; ${style}`.trim();
-    }
-
-    if (computedStyle) {
-      div.setAttribute('style', computedStyle);
-    }
-
-    this._wireStandardEvents(div);
-
-    container.appendChild(div);
-
-    return this;
-  }
-}
-
-/**
- * Factory helper
- */
-export function container(id: string, options: ContainerOptions = {}): Container {
-  return new Container(id, options);
-}

package/lib/components/data.ts

@@ -1,135 +0,0 @@
-/**
- * Data component - SQL query execution
- * Note: No id needed - this is a data-only component
- *
- * Usage:
- *   const posts = jux.data('SELECT * FROM posts WHERE id = ?', [1]);
- *   await posts.execute();
- *   console.log(posts.data);
- */
-
-export interface DataOptions {
-  sql: string;
-  params?: any[];
-  apiUrl?: string;
-}
-
-export class Data {
-  private _data: any[] = [];
-  private _executed: boolean = false;
-  private _loading: boolean = false;
-  private _sql: string;
-  private _params: any[];
-  private _apiUrl: string;
-
-  constructor(sql: string, params: any[] = [], apiUrl: string = '/api/query') {
-    this._sql = sql;
-    this._params = params;
-    this._apiUrl = apiUrl;
-  }
-
-  /* -------------------------
-   * Getters
-   * ------------------------- */
-
-  get data(): any[] {
-    return this._data;
-  }
-
-  get executed(): boolean {
-    return this._executed;
-  }
-
-  get loading(): boolean {
-    return this._loading;
-  }
-
-  get sql(): string {
-    return this._sql;
-  }
-
-  set sql(value: string) {
-    this._sql = value;
-  }
-
-  /* -------------------------
-   * Methods
-   * ------------------------- */
-
-  async execute(): Promise<void> {
-    if (this._executed) return;
-    this._loading = true;
-
-    try {
-      const response = await fetch(this._apiUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          sql: this._sql,
-          params: this._params
-        })
-      });
-
-      if (!response.ok) {
-        throw new Error(`API error: ${response.statusText}`);
-      }
-
-      const result = await response.json();
-      this._data = result.data || [];
-      this._executed = true;
-    } catch (error) {
-      console.error('Data execution error:', error);
-      this._data = [];
-      throw error;
-    } finally {
-      this._loading = false;
-    }
-  }
-
-  reset(): void {
-    this._executed = false;
-    this._data = [];
-    this._loading = false;
-  }
-
-  // Remove id requirement, make it optional for caching
-  static async fetch<T = any>(url: string, options?: RequestInit): Promise<T> {
-    const response = await fetch(url, options);
-    if (!response.ok) {
-      throw new Error(`API error: ${response.statusText}`);
-    }
-    return response.json();
-  }
-
-  // ✅ Static methods - no ID needed
-  static async post<T = any>(url: string, body: any, options?: RequestInit): Promise<T> {
-    const response = await fetch(url, options);
-    if (!response.ok) {
-      throw new Error(`API error: ${response.statusText}`);
-    }
-    return response.json();
-  }
-
-  static async put<T = any>(url: string, body: any, options?: RequestInit): Promise<T> {
-    const response = await fetch(url, options);
-    if (!response.ok) {
-      throw new Error(`API error: ${response.statusText}`);
-    }
-    return response.json();
-  }
-
-  static async delete<T = any>(url: string, options?: RequestInit): Promise<T> {
-    const response = await fetch(url, options);
-    if (!response.ok) {
-      throw new Error(`API error: ${response.statusText}`);
-    }
-    return response.json();
-  }
-}
-
-// ✅ No ID needed - pure data fetching
-export function data<T = any>(url: string, options?: RequestInit): Promise<T> {
-  return Data.fetch<T>(url, options);
-}