juxscript 1.0.132 → 1.1.2

package/lib/components/checkbox.ts

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

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

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

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