juxscript 1.1.4 → 1.1.6

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);
+}

package/lib/components/datepicker.d.ts

@@ -0,0 +1,38 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+export interface DatePickerOptions {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    min?: string;
+    max?: string;
+    style?: string;
+    class?: string;
+    onValidate?: (value: string) => boolean | string;
+}
+interface DatePickerState extends FormInputState {
+    value: string;
+    placeholder: string;
+    min?: string;
+    max?: string;
+}
+export declare class DatePicker extends FormInput<DatePickerState> {
+    constructor(id: string, options?: DatePickerOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    value(value: string): this;
+    placeholder(value: string): this;
+    min(value: string): this;
+    max(value: string): this;
+    getValue(): string;
+    setValue(value: string): this;
+    getDate(): Date | null;
+    protected _validateValue(value: string): boolean | string;
+    protected _buildInputElement(): HTMLElement;
+    render(targetId?: string): this;
+}
+export declare function datepicker(id: string, options?: DatePickerOptions): DatePicker;
+export {};
+//# sourceMappingURL=datepicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAOhE,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,cAAc;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;gBAC1C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAoBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,IAAI,IAAI,GAAG,IAAI;IAMtB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAuCzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAuB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA0DlC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}

package/lib/components/datepicker.js

@@ -0,0 +1,177 @@
+import { FormInput } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['change'];
+export class DatePicker extends FormInput {
+    constructor(id, options = {}) {
+        super(id, {
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select a date',
+            label: options.label ?? '',
+            required: options.required ?? false,
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            min: options.min,
+            max: options.max,
+            style: options.style ?? '',
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
+    value(value) {
+        return this.setValue(value);
+    }
+    placeholder(value) {
+        this.state.placeholder = value;
+        return this;
+    }
+    min(value) {
+        this.state.min = value;
+        return this;
+    }
+    max(value) {
+        this.state.max = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
+    getValue() {
+        return this.state.value;
+    }
+    setValue(value) {
+        this.state.value = value;
+        if (this._inputElement) {
+            this._inputElement.value = value;
+        }
+        return this;
+    }
+    getDate() {
+        if (!this.state.value)
+            return null;
+        const date = new Date(this.state.value);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    _validateValue(value) {
+        const { required, min, max } = this.state;
+        if (required && !value) {
+            return 'Please select a date';
+        }
+        if (value) {
+            const date = new Date(value);
+            if (isNaN(date.getTime())) {
+                return 'Invalid date';
+            }
+            if (min) {
+                const minDate = new Date(min);
+                if (date < minDate) {
+                    return `Date must be on or after ${min}`;
+                }
+            }
+            if (max) {
+                const maxDate = new Date(max);
+                if (date > maxDate) {
+                    return `Date must be on or before ${max}`;
+                }
+            }
+        }
+        if (this._onValidate) {
+            const result = this._onValidate(value);
+            if (result !== true) {
+                return result || 'Invalid date';
+            }
+        }
+        return true;
+    }
+    _buildInputElement() {
+        const { value, placeholder, required, disabled, name, min, max } = this.state;
+        const input = document.createElement('input');
+        input.type = 'date';
+        input.className = 'jux-input-element jux-datepicker-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.value = value;
+        input.placeholder = placeholder;
+        input.required = required;
+        input.disabled = disabled;
+        if (min)
+            input.min = min;
+        if (max)
+            input.max = max;
+        return input;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { style, class: className } = this.state;
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-input jux-datepicker';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
+        }
+        // Input container
+        const inputContainer = document.createElement('div');
+        inputContainer.className = 'jux-input-container jux-datepicker-container';
+        // Calendar icon
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-input-icon';
+        iconEl.appendChild(renderIcon('calendar'));
+        inputContainer.appendChild(iconEl);
+        // Date input
+        const inputEl = this._buildInputElement();
+        this._inputElement = inputEl;
+        inputContainer.appendChild(inputEl);
+        wrapper.appendChild(inputContainer);
+        // Error element
+        wrapper.appendChild(this._renderError());
+        // Wire events
+        this._wireStandardEvents(wrapper);
+        this._wireFormSync(inputEl, 'change');
+        // 🎯 Fire change event when date changes
+        inputEl.addEventListener('change', () => {
+            const input = inputEl;
+            this._triggerCallback('change', input.value);
+        });
+        // Sync label changes
+        const labelSync = this._syncBindings.find(b => b.property === 'label');
+        if (labelSync) {
+            const transform = labelSync.toComponent || ((v) => String(v));
+            labelSync.stateObj.subscribe((val) => {
+                this.label(transform(val));
+            });
+        }
+        container.appendChild(wrapper);
+        return this;
+    }
+}
+export function datepicker(id, options = {}) {
+    return new DatePicker(id, options);
+}

package/lib/components/datepicker.ts

@@ -0,0 +1,234 @@
+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 DatePickerOptions {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    min?: string;
+    max?: string;
+    style?: string;
+    class?: string;
+    onValidate?: (value: string) => boolean | string;
+}
+
+interface DatePickerState extends FormInputState {
+    value: string;
+    placeholder: string;
+    min?: string;
+    max?: string;
+}
+
+export class DatePicker extends FormInput<DatePickerState> {
+    constructor(id: string, options: DatePickerOptions = {}) {
+        super(id, {
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select a date',
+            label: options.label ?? '',
+            required: options.required ?? false,
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            min: options.min,
+            max: options.max,
+            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()
+
+    value(value: string): this {
+        return this.setValue(value);
+    }
+
+    placeholder(value: string): this {
+        this.state.placeholder = value;
+        return this;
+    }
+
+    min(value: string): this {
+        this.state.min = value;
+        return this;
+    }
+
+    max(value: string): this {
+        this.state.max = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    getValue(): string {
+        return this.state.value;
+    }
+
+    setValue(value: string): this {
+        this.state.value = value;
+        if (this._inputElement) {
+            (this._inputElement as HTMLInputElement).value = value;
+        }
+        return this;
+    }
+
+    getDate(): Date | null {
+        if (!this.state.value) return null;
+        const date = new Date(this.state.value);
+        return isNaN(date.getTime()) ? null : date;
+    }
+
+    protected _validateValue(value: string): boolean | string {
+        const { required, min, max } = this.state;
+
+        if (required && !value) {
+            return 'Please select a date';
+        }
+
+        if (value) {
+            const date = new Date(value);
+
+            if (isNaN(date.getTime())) {
+                return 'Invalid date';
+            }
+
+            if (min) {
+                const minDate = new Date(min);
+                if (date < minDate) {
+                    return `Date must be on or after ${min}`;
+                }
+            }
+
+            if (max) {
+                const maxDate = new Date(max);
+                if (date > maxDate) {
+                    return `Date must be on or before ${max}`;
+                }
+            }
+        }
+
+        if (this._onValidate) {
+            const result = this._onValidate(value);
+            if (result !== true) {
+                return result || 'Invalid date';
+            }
+        }
+
+        return true;
+    }
+
+    protected _buildInputElement(): HTMLElement {
+        const { value, placeholder, required, disabled, name, min, max } = this.state;
+
+        const input = document.createElement('input');
+        input.type = 'date';
+        input.className = 'jux-input-element jux-datepicker-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.value = value;
+        input.placeholder = placeholder;
+        input.required = required;
+        input.disabled = disabled;
+
+        if (min) input.min = min;
+        if (max) input.max = max;
+
+        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-input jux-datepicker';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
+        }
+
+        // Input container
+        const inputContainer = document.createElement('div');
+        inputContainer.className = 'jux-input-container jux-datepicker-container';
+
+        // Calendar icon
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-input-icon';
+        iconEl.appendChild(renderIcon('calendar'));
+        inputContainer.appendChild(iconEl);
+
+        // Date input
+        const inputEl = this._buildInputElement();
+        this._inputElement = inputEl;
+        inputContainer.appendChild(inputEl);
+        wrapper.appendChild(inputContainer);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+        this._wireFormSync(inputEl, 'change');
+
+        // 🎯 Fire change event when date changes
+        inputEl.addEventListener('change', () => {
+            const input = inputEl as HTMLInputElement;
+            this._triggerCallback('change', input.value);
+        });
+
+        // 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 datepicker(id: string, options: DatePickerOptions = {}): DatePicker {
+    return new DatePicker(id, options);
+}

package/lib/components/dialog.d.ts

@@ -0,0 +1,38 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface DialogOptions {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'default' | 'danger' | 'warning';
+    style?: string;
+    class?: string;
+}
+type DialogState = {
+    title: string;
+    message: string;
+    confirmText: string;
+    cancelText: string;
+    variant: string;
+    open: boolean;
+    style: string;
+    class: string;
+};
+export declare class Dialog extends BaseComponent<DialogState> {
+    private _dialog;
+    private _overlay;
+    constructor(id: string, options?: DialogOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    title(value: string): this;
+    message(value: string): this;
+    confirmText(value: string): this;
+    cancelText(value: string): this;
+    variant(value: 'default' | 'danger' | 'warning'): this;
+    open(): this;
+    close(): this;
+    render(targetId?: string): this;
+}
+export declare function dialog(id: string, options?: DialogOptions): Dialog;
+export {};
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,aAAa;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IAClD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAanD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI;IAKtD,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAYb,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAkElC;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAEtE"}