juxscript 1.1.4 → 1.1.6

package/lib/components/req.ts

@@ -0,0 +1,303 @@
+/**
+ * Request information and utilities
+ * Provides access to URL, query params, path, referrer, etc.
+ */
+
+export interface RequestInfo {
+    url: string;
+    path: string;
+    query: Record<string, string>;
+    params: Record<string, string>;
+    hash: string;
+    referrer: string;
+    method: string;
+    headers: Record<string, string>;
+}
+
+export class Req {
+    private static _instance: Req | null = null;
+    private _info: RequestInfo;
+
+    private constructor() {
+        this._info = this._parseRequest();
+    }
+
+    /**
+     * Singleton instance
+     */
+    static get instance(): Req {
+        if (!Req._instance) {
+            Req._instance = new Req();
+        }
+        return Req._instance;
+    }
+
+    /**
+     * Parse current request information
+     */
+    private _parseRequest(): RequestInfo {
+        const url = new URL(window.location.href);
+
+        // Parse query string
+        const query: Record<string, string> = {};
+        url.searchParams.forEach((value, key) => {
+            query[key] = value;
+        });
+
+        // Parse path segments as params (basic routing)
+        const pathSegments = url.pathname.split('/').filter(s => s);
+        const params: Record<string, string> = {};
+        pathSegments.forEach((segment, index) => {
+            params[`${index}`] = segment;
+        });
+
+        return {
+            url: url.href,
+            path: url.pathname,
+            query,
+            params,
+            hash: url.hash.slice(1), // Remove leading #
+            referrer: document.referrer,
+            method: 'GET', // Browser requests are always GET initially
+            headers: {
+                'user-agent': navigator.userAgent,
+                'accept-language': navigator.language
+            }
+        };
+    }
+
+    /**
+     * Get full URL
+     */
+    get url(): string {
+        return this._info.url;
+    }
+
+    /**
+     * Get current path (e.g., "/examples/sample/dashboards")
+     */
+    get path(): string {
+        // Always get fresh path from current URL
+        return window.location.pathname;
+    }
+
+    /**
+     * Get query string parameters
+     */
+    get query(): Record<string, string> {
+        return { ...this._info.query };
+    }
+
+    /**
+     * Get path parameters
+     */
+    get params(): Record<string, string> {
+        return { ...this._info.params };
+    }
+
+    /**
+     * Get URL hash (without #)
+     */
+    get hash(): string {
+        return this._info.hash;
+    }
+
+    /**
+     * Get referrer URL
+     */
+    get referrer(): string {
+        return this._info.referrer;
+    }
+
+    /**
+     * Get request method (always GET for browser)
+     */
+    get method(): string {
+        return this._info.method;
+    }
+
+    /**
+     * Get request headers
+     */
+    get headers(): Record<string, string> {
+        return { ...this._info.headers };
+    }
+
+    /**
+     * Check if current path matches a pattern
+     * @param pattern - Path pattern (supports wildcards)
+     * 
+     * Examples:
+     *   req.matches('/examples/sample/*')
+     *   req.matches('/examples/sample/dashboards')
+     *   req.matches('/examples/*\/dashboards')
+     */
+    matches(pattern: string): boolean {
+        const regexPattern = pattern
+            .replace(/\*/g, '.*')
+            .replace(/\//g, '\\/');
+        const regex = new RegExp(`^${regexPattern}$`);
+        return regex.test(this.path);
+    }
+
+    /**
+     * Check if current path starts with prefix
+     */
+    startsWith(prefix: string): boolean {
+        return this.path.startsWith(prefix);
+    }
+
+    /**
+     * Check if current path ends with suffix
+     */
+    endsWith(suffix: string): boolean {
+        return this.path.endsWith(suffix);
+    }
+
+    /**
+     * Get query parameter value
+     */
+    getQuery(key: string, defaultValue?: string): string | undefined {
+        return this.query[key] ?? defaultValue;
+    }
+
+    /**
+     * Get path parameter value
+     */
+    getParam(key: string, defaultValue?: string): string | undefined {
+        return this.params[key] ?? defaultValue;
+    }
+
+    /**
+     * Check if query parameter exists
+     */
+    hasQuery(key: string): boolean {
+        return key in this.query;
+    }
+
+    /**
+     * Get all query parameters as URLSearchParams
+     */
+    getSearchParams(): URLSearchParams {
+        return new URLSearchParams(this.query);
+    }
+
+    /**
+     * Refresh request info (call after navigation)
+     */
+    refresh(): void {
+        this._info = this._parseRequest();
+    }
+
+    /**
+     * Set active state on nav items based on current path
+     * @param items - Nav items to update
+     * @returns Updated nav items with active state set
+     */
+    setActiveNavItems(items: Array<{ href: string; active?: boolean }>): Array<{ href: string; active: boolean }> {
+        return items.map(item => ({
+            ...item,
+            active: this.isActiveNavItem(item.href)
+        }));
+    }
+
+    /**
+     * Check if a nav item should be active based on current path
+     * @param href - The nav item's href
+     */
+    isActiveNavItem(href: string): boolean {
+        // Exact match
+        if (href === this.path) {
+            return true;
+        }
+
+        // Starts with match (for parent routes)
+        // Must be followed by a path separator or end of string
+        // e.g., "/examples/sample" matches "/examples/sample/dashboards"
+        // but "/examples/sam" does NOT match "/examples/sample/dashboards"
+        if (href !== '/' && (this.path === href || this.path.startsWith(href + '/'))) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Get breadcrumbs from current path
+     * @returns Array of breadcrumb objects with label and href
+     */
+    getBreadcrumbs(): Array<{ label: string; href: string }> {
+        const segments = this.path.split('/').filter(s => s);
+        const breadcrumbs: Array<{ label: string; href: string }> = [
+            { label: 'Home', href: '/' }
+        ];
+
+        let currentPath = '';
+        segments.forEach(segment => {
+            currentPath += `/${segment}`;
+            breadcrumbs.push({
+                label: this._formatBreadcrumbLabel(segment),
+                href: currentPath
+            });
+        });
+
+        return breadcrumbs;
+    }
+
+    /**
+     * Format segment into readable breadcrumb label
+     */
+    private _formatBreadcrumbLabel(segment: string): string {
+        return segment
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+
+    /**
+     * Check if this is the home/root path
+     */
+    get isHome(): boolean {
+        return this.path === '/' || this.path === '';
+    }
+
+    /**
+     * Get current domain
+     */
+    get domain(): string {
+        return window.location.hostname;
+    }
+
+    /**
+     * Get current port
+     */
+    get port(): string {
+        return window.location.port;
+    }
+
+    /**
+     * Get current protocol
+     */
+    get protocol(): string {
+        return window.location.protocol.replace(':', '');
+    }
+
+    /**
+     * Check if HTTPS
+     */
+    get isSecure(): boolean {
+        return this.protocol === 'https';
+    }
+}
+
+/**
+ * Global request instance
+ */
+export const req = Req.instance;
+
+/**
+ * Factory function (returns singleton)
+ */
+export function request(): Req {
+    return Req.instance;
+}

package/lib/components/script.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Script - Inject inline JavaScript into the document
+ * For external scripts, use Import component instead
+ * Auto-renders when created or modified
+ */
+export declare class Script {
+    private _id;
+    private code;
+    constructor(code: string, id?: string);
+    render(): this;
+    remove(): void;
+}
+export declare function script(code: string, id?: string): Script;
+//# sourceMappingURL=script.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"script.d.ts","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,IAAI,CAAS;gBAET,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM;IAMrC,MAAM,IAAI,IAAI;IAcd,MAAM,IAAI,IAAI;CAMf;AAGD,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAExD"}

package/lib/components/script.js

@@ -0,0 +1,33 @@
+/**
+ * Script - Inject inline JavaScript into the document
+ * For external scripts, use Import component instead
+ * Auto-renders when created or modified
+ */
+export class Script {
+    constructor(code, id) {
+        // ID only for deduplication, auto-generate if not provided
+        this._id = id || `jux-script-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        this.code = code;
+    }
+    render() {
+        // Check if script with this ID already exists
+        if (document.getElementById(this._id)) {
+            return this;
+        }
+        const script = document.createElement('script');
+        script.id = this._id;
+        script.textContent = this.code;
+        document.head.appendChild(script);
+        return this;
+    }
+    remove() {
+        const existing = document.getElementById(this._id);
+        if (existing) {
+            existing.remove();
+        }
+    }
+}
+// ✅ ID is optional
+export function script(code, id) {
+    return new Script(code, id);
+}

package/lib/components/script.ts

@@ -0,0 +1,41 @@
+/**
+ * Script - Inject inline JavaScript into the document
+ * For external scripts, use Import component instead
+ * Auto-renders when created or modified
+ */
+export class Script {
+  private _id: string;
+  private code: string;
+
+  constructor(code: string, id?: string) {
+    // ID only for deduplication, auto-generate if not provided
+    this._id = id || `jux-script-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    this.code = code;
+  }
+
+  render(): this {
+    // Check if script with this ID already exists
+    if (document.getElementById(this._id)) {
+      return this;
+    }
+
+    const script = document.createElement('script');
+    script.id = this._id;
+    script.textContent = this.code;
+    document.head.appendChild(script);
+
+    return this;
+  }
+
+  remove(): void {
+    const existing = document.getElementById(this._id);
+    if (existing) {
+      existing.remove();
+    }
+  }
+}
+
+// ✅ ID is optional
+export function script(code: string, id?: string): Script {
+  return new Script(code, id);
+}

package/lib/components/select.d.ts

@@ -0,0 +1,40 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectOptions {
+    options?: SelectOption[];
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    style?: string;
+    class?: string;
+    onValidate?: (value: string) => boolean | string;
+}
+interface SelectState extends FormInputState {
+    options: SelectOption[];
+    value: string;
+    placeholder: string;
+}
+export declare class Select extends FormInput<SelectState> {
+    constructor(id: string, options?: SelectOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    options(value: SelectOption[]): this;
+    value(value: string): this;
+    placeholder(value: string): this;
+    addOption(option: SelectOption): this;
+    getValue(): string;
+    setValue(value: string): this;
+    protected _validateValue(value: string): boolean | string;
+    protected _buildInputElement(): HTMLElement;
+    render(targetId?: string): this;
+}
+export declare function select(id: string, options?: SelectOptions): Select;
+export {};
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAMhE,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,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,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,WAAY,SAAQ,cAAc;IACxC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,qBAAa,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;gBAClC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAmBnD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI;IAKpC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI;IASrC,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAU7B,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAsBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAqC3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAiFlC;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAEtE"}

package/lib/components/select.js

@@ -0,0 +1,183 @@
+import { FormInput } from './base/FormInput.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['change'];
+export class Select extends FormInput {
+    constructor(id, options = {}) {
+        super(id, {
+            options: options.options ?? [],
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select an option',
+            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;
+        }
+    }
+    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()
+    options(value) {
+        this.state.options = value;
+        return this;
+    }
+    value(value) {
+        return this.setValue(value);
+    }
+    placeholder(value) {
+        this.state.placeholder = value;
+        return this;
+    }
+    addOption(option) {
+        this.state.options = [...this.state.options, option];
+        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;
+    }
+    _validateValue(value) {
+        const { required, options } = this.state;
+        if (required && !value) {
+            return 'Please select an option';
+        }
+        // Validate that value is one of the options
+        if (value && !options.some(opt => opt.value === value)) {
+            return 'Invalid option selected';
+        }
+        if (this._onValidate) {
+            const result = this._onValidate(value);
+            if (result !== true) {
+                return result || 'Invalid value';
+            }
+        }
+        return true;
+    }
+    _buildInputElement() {
+        const { options, value, placeholder, required, disabled, name } = this.state;
+        const select = document.createElement('select');
+        select.className = 'jux-input-element jux-select-element';
+        select.id = `${this._id}-input`;
+        select.name = name;
+        select.required = required;
+        select.disabled = disabled;
+        // Placeholder option
+        if (placeholder) {
+            const placeholderOption = document.createElement('option');
+            placeholderOption.value = '';
+            placeholderOption.textContent = placeholder;
+            placeholderOption.disabled = true;
+            placeholderOption.selected = !value;
+            select.appendChild(placeholderOption);
+        }
+        // Options
+        options.forEach(option => {
+            const optionEl = document.createElement('option');
+            optionEl.value = option.value;
+            optionEl.textContent = option.label;
+            optionEl.disabled = option.disabled || false;
+            optionEl.selected = option.value === value;
+            select.appendChild(optionEl);
+        });
+        return select;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * 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-select';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
+        }
+        // Select container
+        const selectContainer = document.createElement('div');
+        selectContainer.className = 'jux-input-container jux-select-container';
+        // Select element
+        const selectEl = this._buildInputElement();
+        this._inputElement = selectEl;
+        selectContainer.appendChild(selectEl);
+        wrapper.appendChild(selectContainer);
+        // Error element
+        wrapper.appendChild(this._renderError());
+        // Wire events
+        this._wireStandardEvents(wrapper);
+        this._wireFormSync(selectEl, 'change');
+        // 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));
+            });
+        }
+        // Sync options changes
+        const optionsSync = this._syncBindings.find(b => b.property === 'options');
+        if (optionsSync) {
+            const transform = optionsSync.toComponent || ((v) => v);
+            optionsSync.stateObj.subscribe((val) => {
+                const transformed = transform(val);
+                this.state.options = transformed;
+                // Rebuild select options
+                selectEl.innerHTML = '';
+                if (this.state.placeholder) {
+                    const placeholderOption = document.createElement('option');
+                    placeholderOption.value = '';
+                    placeholderOption.textContent = this.state.placeholder;
+                    placeholderOption.disabled = true;
+                    placeholderOption.selected = !this.state.value;
+                    selectEl.appendChild(placeholderOption);
+                }
+                transformed.forEach((option) => {
+                    const optionEl = document.createElement('option');
+                    optionEl.value = option.value;
+                    optionEl.textContent = option.label;
+                    optionEl.disabled = option.disabled || false;
+                    optionEl.selected = option.value === this.state.value;
+                    selectEl.appendChild(optionEl);
+                });
+            });
+        }
+        container.appendChild(wrapper);
+        return this;
+    }
+}
+export function select(id, options = {}) {
+    return new Select(id, options);
+}