juxscript 1.1.3 → 1.1.4

package/lib/components/button.ts

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

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

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