juxscript 1.1.2 → 1.1.4

package/lib/components/radio.ts

@@ -1,278 +0,0 @@
-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.ts

@@ -1,303 +0,0 @@
-/**
- * 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.ts

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