juxscript 1.1.4 → 1.1.6

package/lib/components/radio.ts

@@ -0,0 +1,278 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change'] as const;
+
+export interface RadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface RadioOptions {
+    options?: RadioOption[];
+    value?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    orientation?: 'vertical' | 'horizontal';  // ✅ Add orientation
+    style?: string;
+    class?: string;
+    onValidate?: (value: string) => boolean | string;
+}
+
+interface RadioState extends FormInputState {
+    options: RadioOption[];
+    value: string;
+    orientation: 'vertical' | 'horizontal';  // ✅ Add to state
+}
+
+export class Radio extends FormInput<RadioState> {
+    private _radioInputs: HTMLInputElement[] = [];
+
+    constructor(id: string, options: RadioOptions = {}) {
+        super(id, {
+            options: options.options ?? [],
+            value: options.value ?? '',
+            label: options.label ?? '',
+            required: options.required ?? false,
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            orientation: options.orientation ?? 'vertical',  // ✅ Default to vertical
+            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()
+
+    options(value: RadioOption[]): this {
+        this.state.options = value;
+        return this;
+    }
+
+    value(value: string): this {
+        return this.setValue(value);
+    }
+
+    addOption(option: RadioOption): this {
+        this.state.options = [...this.state.options, option];
+        return this;
+    }
+
+    orientation(value: 'vertical' | 'horizontal'): this {
+        this.state.orientation = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    getValue(): string {
+        return this.state.value;
+    }
+
+    setValue(value: string): this {
+        this.state.value = value;
+
+        // Update all radio inputs
+        this._radioInputs.forEach(input => {
+            input.checked = input.value === value;
+        });
+
+        return this;
+    }
+
+    protected _validateValue(value: string): boolean | string {
+        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;
+    }
+
+    protected _buildInputElement(): HTMLElement {
+        // Radio uses a container, not a single input
+        const container = document.createElement('div');
+        container.className = 'jux-radio-options';
+        return container;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { options, value, name, disabled, orientation, style, class: className } = this.state;  // ✅ Destructure orientation
+
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-radio';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
+        }
+
+        // Radio options container
+        const optionsContainer = document.createElement('div');
+        optionsContainer.className = `jux-radio-options jux-radio-${orientation}`;  // ✅ Add orientation class
+        this._inputElement = optionsContainer;
+
+        this._radioInputs = [];
+
+        options.forEach((option, index) => {
+            const radioWrapper = document.createElement('label');
+            radioWrapper.className = 'jux-radio-option';
+
+            const input = document.createElement('input');
+            input.type = 'radio';
+            input.className = 'jux-radio-input';
+            input.id = `${this._id}-option-${index}`;
+            input.name = name;
+            input.value = option.value;
+            input.checked = option.value === value;
+            input.disabled = disabled || option.disabled || false;
+
+            this._radioInputs.push(input);
+
+            const radioMark = document.createElement('span');
+            radioMark.className = 'jux-radio-mark';
+
+            const labelText = document.createElement('span');
+            labelText.className = 'jux-radio-label-text';
+            labelText.textContent = option.label;
+
+            radioWrapper.appendChild(input);
+            radioWrapper.appendChild(radioMark);
+            radioWrapper.appendChild(labelText);
+
+            optionsContainer.appendChild(radioWrapper);
+        });
+
+        wrapper.appendChild(optionsContainer);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+
+        // Wire radio-specific sync
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            const transformToState = toState || ((v: string) => v);
+            const transformToComponent = toComponent || ((v: any) => String(v));
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+
+            // Component → State
+            this._radioInputs.forEach(input => {
+                input.addEventListener('change', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
+
+                    const selectedValue = input.value;
+                    this.state.value = selectedValue;
+                    this._clearError();
+
+                    const transformed = transformToState(selectedValue);
+                    stateObj.set(transformed);
+
+                    // 🎯 Fire the change callback event
+                    this._triggerCallback('change', selectedValue);
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
+            });
+        } else {
+            // Default behavior without sync
+            this._radioInputs.forEach(input => {
+                input.addEventListener('change', () => {
+                    this.state.value = input.value;
+                    this._clearError();
+
+                    // 🎯 Fire the change callback event
+                    this._triggerCallback('change', input.value);
+                });
+            });
+        }
+
+        // Always add blur validation
+        this._radioInputs.forEach(input => {
+            input.addEventListener('blur', () => {
+                this.validate();
+            });
+        });
+
+        // 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 radio(id: string, options: RadioOptions = {}): Radio {
+    return new Radio(id, options);
+}

package/lib/components/req.d.ts

@@ -0,0 +1,155 @@
+/**
+ * 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 declare class Req {
+    private static _instance;
+    private _info;
+    private constructor();
+    /**
+     * Singleton instance
+     */
+    static get instance(): Req;
+    /**
+     * Parse current request information
+     */
+    private _parseRequest;
+    /**
+     * Get full URL
+     */
+    get url(): string;
+    /**
+     * Get current path (e.g., "/examples/sample/dashboards")
+     */
+    get path(): string;
+    /**
+     * Get query string parameters
+     */
+    get query(): Record<string, string>;
+    /**
+     * Get path parameters
+     */
+    get params(): Record<string, string>;
+    /**
+     * Get URL hash (without #)
+     */
+    get hash(): string;
+    /**
+     * Get referrer URL
+     */
+    get referrer(): string;
+    /**
+     * Get request method (always GET for browser)
+     */
+    get method(): string;
+    /**
+     * Get request headers
+     */
+    get headers(): Record<string, string>;
+    /**
+     * 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;
+    /**
+     * Check if current path starts with prefix
+     */
+    startsWith(prefix: string): boolean;
+    /**
+     * Check if current path ends with suffix
+     */
+    endsWith(suffix: string): boolean;
+    /**
+     * Get query parameter value
+     */
+    getQuery(key: string, defaultValue?: string): string | undefined;
+    /**
+     * Get path parameter value
+     */
+    getParam(key: string, defaultValue?: string): string | undefined;
+    /**
+     * Check if query parameter exists
+     */
+    hasQuery(key: string): boolean;
+    /**
+     * Get all query parameters as URLSearchParams
+     */
+    getSearchParams(): URLSearchParams;
+    /**
+     * Refresh request info (call after navigation)
+     */
+    refresh(): void;
+    /**
+     * 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;
+    }>;
+    /**
+     * Check if a nav item should be active based on current path
+     * @param href - The nav item's href
+     */
+    isActiveNavItem(href: string): boolean;
+    /**
+     * Get breadcrumbs from current path
+     * @returns Array of breadcrumb objects with label and href
+     */
+    getBreadcrumbs(): Array<{
+        label: string;
+        href: string;
+    }>;
+    /**
+     * Format segment into readable breadcrumb label
+     */
+    private _formatBreadcrumbLabel;
+    /**
+     * Check if this is the home/root path
+     */
+    get isHome(): boolean;
+    /**
+     * Get current domain
+     */
+    get domain(): string;
+    /**
+     * Get current port
+     */
+    get port(): string;
+    /**
+     * Get current protocol
+     */
+    get protocol(): string;
+    /**
+     * Check if HTTPS
+     */
+    get isSecure(): boolean;
+}
+/**
+ * Global request instance
+ */
+export declare const req: Req;
+/**
+ * Factory function (returns singleton)
+ */
+export declare function request(): Req;
+//# sourceMappingURL=req.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"req.d.ts","sourceRoot":"","sources":["req.ts"],"names":[],"mappings":"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"}

package/lib/components/req.js

@@ -0,0 +1,253 @@
+/**
+ * Request information and utilities
+ * Provides access to URL, query params, path, referrer, etc.
+ */
+export class Req {
+    constructor() {
+        this._info = this._parseRequest();
+    }
+    /**
+     * Singleton instance
+     */
+    static get instance() {
+        if (!Req._instance) {
+            Req._instance = new Req();
+        }
+        return Req._instance;
+    }
+    /**
+     * Parse current request information
+     */
+    _parseRequest() {
+        const url = new URL(window.location.href);
+        // Parse query string
+        const query = {};
+        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 = {};
+        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() {
+        return this._info.url;
+    }
+    /**
+     * Get current path (e.g., "/examples/sample/dashboards")
+     */
+    get path() {
+        // Always get fresh path from current URL
+        return window.location.pathname;
+    }
+    /**
+     * Get query string parameters
+     */
+    get query() {
+        return { ...this._info.query };
+    }
+    /**
+     * Get path parameters
+     */
+    get params() {
+        return { ...this._info.params };
+    }
+    /**
+     * Get URL hash (without #)
+     */
+    get hash() {
+        return this._info.hash;
+    }
+    /**
+     * Get referrer URL
+     */
+    get referrer() {
+        return this._info.referrer;
+    }
+    /**
+     * Get request method (always GET for browser)
+     */
+    get method() {
+        return this._info.method;
+    }
+    /**
+     * Get request headers
+     */
+    get headers() {
+        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) {
+        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) {
+        return this.path.startsWith(prefix);
+    }
+    /**
+     * Check if current path ends with suffix
+     */
+    endsWith(suffix) {
+        return this.path.endsWith(suffix);
+    }
+    /**
+     * Get query parameter value
+     */
+    getQuery(key, defaultValue) {
+        return this.query[key] ?? defaultValue;
+    }
+    /**
+     * Get path parameter value
+     */
+    getParam(key, defaultValue) {
+        return this.params[key] ?? defaultValue;
+    }
+    /**
+     * Check if query parameter exists
+     */
+    hasQuery(key) {
+        return key in this.query;
+    }
+    /**
+     * Get all query parameters as URLSearchParams
+     */
+    getSearchParams() {
+        return new URLSearchParams(this.query);
+    }
+    /**
+     * Refresh request info (call after navigation)
+     */
+    refresh() {
+        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) {
+        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) {
+        // 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() {
+        const segments = this.path.split('/').filter(s => s);
+        const breadcrumbs = [
+            { 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
+     */
+    _formatBreadcrumbLabel(segment) {
+        return segment
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    /**
+     * Check if this is the home/root path
+     */
+    get isHome() {
+        return this.path === '/' || this.path === '';
+    }
+    /**
+     * Get current domain
+     */
+    get domain() {
+        return window.location.hostname;
+    }
+    /**
+     * Get current port
+     */
+    get port() {
+        return window.location.port;
+    }
+    /**
+     * Get current protocol
+     */
+    get protocol() {
+        return window.location.protocol.replace(':', '');
+    }
+    /**
+     * Check if HTTPS
+     */
+    get isSecure() {
+        return this.protocol === 'https';
+    }
+}
+Req._instance = null;
+/**
+ * Global request instance
+ */
+export const req = Req.instance;
+/**
+ * Factory function (returns singleton)
+ */
+export function request() {
+    return Req.instance;
+}