juxscript 1.0.132 → 1.1.2

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.ts

@@ -0,0 +1,173 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions - Card is display-only, no interactive events
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;  // ✅ Can be clicked for navigation/selection
+
+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 class Card extends BaseComponent<CardState> {
+  constructor(id: string, options: CardOptions = {}) {
+    super(id, {
+      title: options.title ?? '',
+      content: options.content ?? '',
+      footer: options.footer ?? '',
+      variant: options.variant ?? 'default',
+      hoverable: options.hoverable ?? false,
+      icon: options.icon ?? '',
+      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
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  content(value: string): this {
+    this.state.content = value;
+    return this;
+  }
+
+  footer(value: string): this {
+    this.state.footer = value;
+    return this;
+  }
+
+  icon(value: string): this {
+    this.state.icon = value;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { title, content, footer, variant, hoverable, icon, style, class: className } = this.state;
+
+    const card = document.createElement('div');
+    card.className = `jux-card jux-card-${variant}`;
+    card.id = this._id;
+    if (hoverable) card.classList.add('jux-card-hoverable');
+    if (className) card.className += ` ${className}`;
+    if (style) card.setAttribute('style', style);
+
+    if (title || icon) {
+      const header = document.createElement('div');
+      header.className = 'jux-card-header';
+
+      if (icon) {
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-card-icon';
+        iconEl.appendChild(renderIcon(icon));
+        header.appendChild(iconEl);
+      }
+
+      if (title) {
+        const titleEl = document.createElement('span');
+        titleEl.className = 'jux-card-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
+
+      card.appendChild(header);
+    }
+
+    const body = document.createElement('div');
+    body.className = 'jux-card-body';
+    body.innerHTML = content;
+    card.appendChild(body);
+
+    if (footer) {
+      const footerEl = document.createElement('div');
+      footerEl.className = 'jux-card-footer';
+      footerEl.innerHTML = footer;
+      card.appendChild(footerEl);
+    }
+
+    this._wireStandardEvents(card);
+
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'title') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const header = card.querySelector('.jux-card-header');
+          if (header) {
+            header.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+      else if (property === 'content') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          body.innerHTML = transformed;
+          this.state.content = transformed;
+        });
+      }
+      else if (property === 'footer') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const footerEl = card.querySelector('.jux-card-footer');
+          if (footerEl) {
+            footerEl.innerHTML = transformed;
+          }
+          this.state.footer = transformed;
+        });
+      }
+    });
+
+    container.appendChild(card);
+    return this;
+  }
+}
+
+export function card(id: string, options: CardOptions = {}): Card {
+  return new Card(id, options);
+}

package/lib/components/chart.ts

@@ -0,0 +1,231 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { Chart, ChartConfiguration, ChartType, ChartOptions, ChartData } from 'chart.js/auto';
+
+// filepath: /Users/timkerr/newprojects2025/compile-sqljs/packages/jux/lib/components/chart.ts
+
+export interface ChartState {
+    type: ChartType;
+    data: ChartData;
+    options: ChartOptions;
+    style?: string;
+    class?: string;
+    visible?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+/**
+ * Chart component using Chart.js
+ * Provides fluent API for creating and configuring charts
+ */
+export class ChartComponent extends BaseComponent<ChartState> {
+    private static readonly TRIGGER_EVENTS: readonly string[] = [];
+    private static readonly CALLBACK_EVENTS: readonly string[] = ['render', 'update', 'destroy'];
+    private chartInstance: Chart | null = null;
+
+    constructor(id: string, type: ChartType = 'bar', options?: Partial<ChartState>) {
+        super(id, {
+            type,
+            data: { datasets: [] },
+            options: {},
+            ...options
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return ChartComponent.TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return ChartComponent.CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART TYPE
+     * ═════════════════════════════════════════════════════════════════ */
+
+    type(value: ChartType): this {
+        this.state.type = value;
+        if (this.chartInstance) {
+            // Destroy and recreate chart with new type
+            const canvas = this.chartInstance.canvas;
+            this.chartInstance.destroy();
+            const config: ChartConfiguration = {
+                type: this.state.type,
+                data: this.state.data,
+                options: this.state.options
+            };
+            this.chartInstance = new Chart(canvas, config);
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * DATA CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    data(value: ChartData): this {
+        this.state.data = value;
+        if (this.chartInstance) {
+            this.chartInstance.data = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    labels(value: string[]): this {
+        this.state.data.labels = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.labels = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    datasets(value: any[]): this {
+        this.state.data.datasets = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    addDataset(dataset: any): this {
+        this.state.data.datasets.push(dataset);
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets.push(dataset);
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * OPTIONS CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    options(value: ChartOptions): this {
+        this.state.options = { ...this.state.options, ...value };
+        if (this.chartInstance) {
+            this.chartInstance.options = this.state.options;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    responsive(value: boolean = true): this {
+        return this.options({ responsive: value });
+    }
+
+    maintainAspectRatio(value: boolean = true): this {
+        return this.options({ maintainAspectRatio: value });
+    }
+
+    title(text: string, display: boolean = true): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                title: { display, text }
+            }
+        });
+    }
+
+    legend(display: boolean = true, position: 'top' | 'bottom' | 'left' | 'right' = 'top'): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                legend: { display, position }
+            }
+        });
+    }
+
+    tooltip(enabled: boolean = true): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                tooltip: { enabled }
+            }
+        });
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART OPERATIONS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    update(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this {
+        if (this.chartInstance) {
+            this.chartInstance.update(mode);
+            this._triggerCallback('update', this.chartInstance);
+        }
+        return this;
+    }
+
+    reset(): this {
+        if (this.chartInstance) {
+            this.chartInstance.reset();
+        }
+        return this;
+    }
+
+    destroy(): this {
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+            this.chartInstance = null;
+            this._triggerCallback('destroy');
+        }
+        return this;
+    }
+
+    getChart(): Chart | null {
+        return this.chartInstance;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        // Destroy existing chart
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+        }
+
+        // Clear container and create canvas
+        container.innerHTML = '';
+        const canvas = document.createElement('canvas');
+        canvas.id = `${this._id}-canvas`;
+
+        // Apply styles and classes
+        if (this.state.style) container.setAttribute('style', this.state.style);
+        if (this.state.class) container.className = this.state.class;
+        if (this.state.visible === false) container.style.display = 'none';
+
+        container.appendChild(canvas);
+
+        // Create Chart.js instance
+        const config: ChartConfiguration = {
+            type: this.state.type,
+            data: this.state.data,
+            options: this.state.options
+        };
+
+        this.chartInstance = new Chart(canvas, config);
+
+        // Wire events and syncs
+        this._wireStandardEvents(container);
+        this._wireAllSyncs();
+
+        this._triggerCallback('render', this.chartInstance);
+
+        return this;
+    }
+}
+
+/**
+ * Factory function for creating chart components
+ */
+export function chart(id: string, type: ChartType = 'bar', options?: Partial<ChartState>): ChartComponent {
+    return new ChartComponent(id, type, options);
+}