juxscript 1.1.4 → 1.1.6

package/lib/components/card.js

@@ -0,0 +1,127 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+// Event definitions - Card is display-only, no interactive events
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['click']; // ✅ Can be clicked for navigation/selection
+export class Card extends BaseComponent {
+    constructor(id, options = {}) {
+        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 ?? ''
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent
+    title(value) {
+        this.state.title = value;
+        return this;
+    }
+    content(value) {
+        this.state.content = value;
+        return this;
+    }
+    footer(value) {
+        this.state.footer = value;
+        return this;
+    }
+    icon(value) {
+        this.state.icon = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        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) => String(v));
+                stateObj.subscribe((val) => {
+                    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) => String(v));
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    body.innerHTML = transformed;
+                    this.state.content = transformed;
+                });
+            }
+            else if (property === 'footer') {
+                const transform = toComponent || ((v) => String(v));
+                stateObj.subscribe((val) => {
+                    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, options = {}) {
+    return new Card(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.d.ts

@@ -0,0 +1,45 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { Chart, ChartType, ChartOptions, ChartData } from 'chart.js/auto';
+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 declare class ChartComponent extends BaseComponent<ChartState> {
+    private static readonly TRIGGER_EVENTS;
+    private static readonly CALLBACK_EVENTS;
+    private chartInstance;
+    constructor(id: string, type?: ChartType, options?: Partial<ChartState>);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    type(value: ChartType): this;
+    data(value: ChartData): this;
+    labels(value: string[]): this;
+    datasets(value: any[]): this;
+    addDataset(dataset: any): this;
+    options(value: ChartOptions): this;
+    responsive(value?: boolean): this;
+    maintainAspectRatio(value?: boolean): this;
+    title(text: string, display?: boolean): this;
+    legend(display?: boolean, position?: 'top' | 'bottom' | 'left' | 'right'): this;
+    tooltip(enabled?: boolean): this;
+    update(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this;
+    reset(): this;
+    destroy(): this;
+    getChart(): Chart | null;
+    render(targetId?: string): this;
+}
+/**
+ * Factory function for creating chart components
+ */
+export declare function chart(id: string, type?: ChartType, options?: Partial<ChartState>): ChartComponent;
+//# sourceMappingURL=chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAsB,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI9F,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,aAAa,CAAC,UAAU,CAAC;IACzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAyB;IAC/D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAsD;IAC7F,OAAO,CAAC,aAAa,CAAsB;gBAE/B,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,SAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC;IAS9E,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAoB5B,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAS5B,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAS7B,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAS5B,UAAU,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAa9B,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;IASlC,UAAU,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAIvC,mBAAmB,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAIhD,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,OAAc,GAAG,IAAI;IASlD,MAAM,CAAC,OAAO,GAAE,OAAc,EAAE,QAAQ,GAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAe,GAAG,IAAI;IAS5F,OAAO,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAatC,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI;IAQ9E,KAAK,IAAI,IAAI;IAOb,OAAO,IAAI,IAAI;IASf,QAAQ,IAAI,KAAK,GAAG,IAAI;IAQxB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAqClC;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,SAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,cAAc,CAExG"}

package/lib/components/chart.js

@@ -0,0 +1,186 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { Chart } from 'chart.js/auto';
+/**
+ * Chart component using Chart.js
+ * Provides fluent API for creating and configuring charts
+ */
+export class ChartComponent extends BaseComponent {
+    constructor(id, type = 'bar', options) {
+        super(id, {
+            type,
+            data: { datasets: [] },
+            options: {},
+            ...options
+        });
+        this.chartInstance = null;
+    }
+    getTriggerEvents() {
+        return ChartComponent.TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return ChartComponent.CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART TYPE
+     * ═════════════════════════════════════════════════════════════════ */
+    type(value) {
+        this.state.type = value;
+        if (this.chartInstance) {
+            // Destroy and recreate chart with new type
+            const canvas = this.chartInstance.canvas;
+            this.chartInstance.destroy();
+            const config = {
+                type: this.state.type,
+                data: this.state.data,
+                options: this.state.options
+            };
+            this.chartInstance = new Chart(canvas, config);
+        }
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * DATA CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+    data(value) {
+        this.state.data = value;
+        if (this.chartInstance) {
+            this.chartInstance.data = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+    labels(value) {
+        this.state.data.labels = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.labels = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+    datasets(value) {
+        this.state.data.datasets = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+    addDataset(dataset) {
+        this.state.data.datasets.push(dataset);
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets.push(dataset);
+            this.chartInstance.update();
+        }
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * OPTIONS CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+    options(value) {
+        this.state.options = { ...this.state.options, ...value };
+        if (this.chartInstance) {
+            this.chartInstance.options = this.state.options;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+    responsive(value = true) {
+        return this.options({ responsive: value });
+    }
+    maintainAspectRatio(value = true) {
+        return this.options({ maintainAspectRatio: value });
+    }
+    title(text, display = true) {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                title: { display, text }
+            }
+        });
+    }
+    legend(display = true, position = 'top') {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                legend: { display, position }
+            }
+        });
+    }
+    tooltip(enabled = true) {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                tooltip: { enabled }
+            }
+        });
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART OPERATIONS
+     * ═════════════════════════════════════════════════════════════════ */
+    update(mode) {
+        if (this.chartInstance) {
+            this.chartInstance.update(mode);
+            this._triggerCallback('update', this.chartInstance);
+        }
+        return this;
+    }
+    reset() {
+        if (this.chartInstance) {
+            this.chartInstance.reset();
+        }
+        return this;
+    }
+    destroy() {
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+            this.chartInstance = null;
+            this._triggerCallback('destroy');
+        }
+        return this;
+    }
+    getChart() {
+        return this.chartInstance;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        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 = {
+            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;
+    }
+}
+ChartComponent.TRIGGER_EVENTS = [];
+ChartComponent.CALLBACK_EVENTS = ['render', 'update', 'destroy'];
+/**
+ * Factory function for creating chart components
+ */
+export function chart(id, type = 'bar', options) {
+    return new ChartComponent(id, type, options);
+}