juxscript 1.1.4 → 1.1.6

package/lib/components/select.ts

@@ -0,0 +1,252 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change'] as const;
+
+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 class Select extends FormInput<SelectState> {
+    constructor(id: string, options: SelectOptions = {}) {
+        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;
+        }
+    }
+
+    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: SelectOption[]): this {
+        this.state.options = value;
+        return this;
+    }
+
+    value(value: string): this {
+        return this.setValue(value);
+    }
+
+    placeholder(value: string): this {
+        this.state.placeholder = value;
+        return this;
+    }
+
+    addOption(option: SelectOption): this {
+        this.state.options = [...this.state.options, option];
+        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 HTMLSelectElement).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 {
+        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?: 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-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() as HTMLSelectElement;
+        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: any) => String(v));
+            labelSync.stateObj.subscribe((val: any) => {
+                this.label(transform(val));
+            });
+        }
+
+        // Sync options changes
+        const optionsSync = this._syncBindings.find(b => b.property === 'options');
+        if (optionsSync) {
+            const transform = optionsSync.toComponent || ((v: any) => v);
+            optionsSync.stateObj.subscribe((val: any) => {
+                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: SelectOption) => {
+                    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: string, options: SelectOptions = {}): Select {
+    return new Select(id, options);
+}

package/lib/components/sidebar.d.ts

@@ -0,0 +1,48 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { MenuOptions } from './menu.js';
+export interface SidebarOptions {
+    position?: 'left' | 'right';
+    width?: string;
+    collapsible?: boolean;
+    showToggle?: boolean;
+    expandOnHover?: boolean;
+    collapsed?: boolean;
+    menu?: MenuOptions;
+    style?: string;
+    class?: string;
+}
+type SidebarState = {
+    position: 'left' | 'right';
+    width: string;
+    collapsible: boolean;
+    showToggle: boolean;
+    expandOnHover: boolean;
+    collapsed: boolean;
+    menu: MenuOptions | null;
+    style: string;
+    class: string;
+};
+export declare class Sidebar extends BaseComponent<SidebarState> {
+    private _sidebar;
+    private _menu;
+    constructor(id: string, options?: SidebarOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    width(value: string): this;
+    position(value: 'left' | 'right'): this;
+    collapsible(value: boolean): this;
+    showToggle(value: boolean): this;
+    expandOnHover(value: boolean): this;
+    collapsed(value: boolean): this;
+    menu(value: MenuOptions): this;
+    toggle(): void;
+    /**
+     * Refresh menu active states (called automatically on URL changes)
+     */
+    refreshMenu(): this;
+    private _updateCollapsedState;
+    render(targetId?: string): this;
+}
+export declare function sidebar(id: string, options?: SidebarOptions): Sidebar;
+export {};
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAQ,WAAW,EAAE,MAAM,WAAW,CAAC;AAO9C,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;IACtD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,KAAK,CAAqB;gBAEtB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IAwBpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAiBhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAKvC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKnC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAM/B,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAK9B,MAAM,IAAI,IAAI;IAYd;;OAEG;IACH,WAAW,IAAI,IAAI;IAQnB,OAAO,CAAC,qBAAqB;IAU7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAuHhC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}

package/lib/components/sidebar.js

@@ -0,0 +1,207 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+import { Menu } from './menu.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['toggle'];
+export class Sidebar extends BaseComponent {
+    constructor(id, options = {}) {
+        // Restore collapsed state from localStorage if available
+        const storageKey = `jux-sidebar-${id}-collapsed`;
+        const savedCollapsed = localStorage.getItem(storageKey);
+        const initialCollapsed = savedCollapsed !== null ? savedCollapsed === 'true' : (options.collapsed ?? false);
+        super(id, {
+            position: options.position ?? 'left',
+            width: options.width ?? '',
+            collapsible: options.collapsible ?? true,
+            showToggle: options.showToggle ?? false,
+            expandOnHover: options.expandOnHover ?? false,
+            collapsed: initialCollapsed,
+            menu: options.menu ?? null,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._sidebar = null;
+        this._menu = null;
+        // Listen for URL changes to update menu active states
+        if (typeof window !== 'undefined') {
+            window.addEventListener('popstate', () => this.refreshMenu());
+        }
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading(), focus(), blur(), remove()
+    width(value) {
+        this.state.width = value;
+        return this;
+    }
+    position(value) {
+        this.state.position = value;
+        return this;
+    }
+    collapsible(value) {
+        this.state.collapsible = value;
+        return this;
+    }
+    showToggle(value) {
+        this.state.showToggle = value;
+        return this;
+    }
+    expandOnHover(value) {
+        this.state.expandOnHover = value;
+        return this;
+    }
+    collapsed(value) {
+        this.state.collapsed = value;
+        this._updateCollapsedState();
+        return this;
+    }
+    menu(value) {
+        this.state.menu = value;
+        return this;
+    }
+    toggle() {
+        this.state.collapsed = !this.state.collapsed;
+        this._updateCollapsedState();
+        // Save to localStorage
+        const storageKey = `jux-sidebar-${this._id}-collapsed`;
+        localStorage.setItem(storageKey, String(this.state.collapsed));
+        // 🎯 Fire the toggle callback event
+        this._triggerCallback('toggle', this.state.collapsed);
+    }
+    /**
+     * Refresh menu active states (called automatically on URL changes)
+     */
+    refreshMenu() {
+        if (this._menu && this.state.menu) {
+            // Re-evaluate and update menu items with current active states
+            this._menu.items(this.state.menu.items || []);
+        }
+        return this;
+    }
+    _updateCollapsedState() {
+        if (this._sidebar) {
+            this._sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
+        }
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { position, collapsed, expandOnHover, menu, style, class: className } = this.state;
+        // Build sidebar element
+        const sidebar = document.createElement('aside');
+        sidebar.id = this._id;
+        if (className)
+            sidebar.className = className;
+        if (style)
+            sidebar.setAttribute('style', style);
+        // Apply initial collapsed state
+        if (collapsed) {
+            sidebar.classList.add('jux-sidebar-collapsed');
+        }
+        // Menu container (append first so toggle appears at bottom)
+        const menuContainer = document.createElement('div');
+        menuContainer.className = 'jux-sidebar-menu';
+        menuContainer.id = `${this._id}-menu`;
+        sidebar.appendChild(menuContainer);
+        // Toggle button (append last so it appears at bottom)
+        if (this.state.collapsible || this.state.showToggle) {
+            const toggleBtn = document.createElement('button');
+            toggleBtn.className = 'jux-sidebar-toggle';
+            toggleBtn.type = 'button';
+            const toggleIcon = document.createElement('span');
+            toggleIcon.className = 'jux-sidebar-toggle-icon';
+            const chevronIcon = renderIcon(position === 'left' ? '➡️' : '⬅️');
+            toggleIcon.appendChild(chevronIcon);
+            toggleBtn.appendChild(toggleIcon);
+            if (collapsed) {
+                toggleBtn.classList.add('jux-sidebar-toggle-collapsed');
+            }
+            toggleBtn.addEventListener('click', () => {
+                this.toggle();
+                toggleBtn.classList.toggle('jux-sidebar-toggle-collapsed', this.state.collapsed);
+            });
+            sidebar.appendChild(toggleBtn);
+        }
+        // Handle expand on hover
+        if (expandOnHover) {
+            sidebar.addEventListener('mouseenter', () => {
+                if (this.state.collapsed) {
+                    sidebar.classList.add('jux-sidebar-hover-expanded');
+                }
+            });
+            sidebar.addEventListener('mouseleave', () => {
+                if (this.state.collapsed) {
+                    sidebar.classList.remove('jux-sidebar-hover-expanded');
+                }
+            });
+        }
+        // Wire events using inherited method
+        this._wireStandardEvents(sidebar);
+        // Wire sync bindings for 'collapsed' property
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'collapsed') {
+                const transform = toComponent || ((v) => v);
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    const isCollapsed = Boolean(transformed);
+                    this.state.collapsed = isCollapsed;
+                    this._updateCollapsedState();
+                });
+            }
+            else if (property === 'menu') {
+                const transform = toComponent || ((v) => v);
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    this.state.menu = transformed;
+                    // Update menu items if menu instance exists
+                    if (this._menu) {
+                        this._menu.items(transformed.items || []);
+                        // Re-render the menu
+                        const menuEl = menuContainer.querySelector(`#${this._id}-menu-instance`);
+                        if (menuEl) {
+                            menuEl.remove();
+                        }
+                        this._menu.render(`#${menuContainer.id}`);
+                    }
+                });
+            }
+        });
+        container.appendChild(sidebar);
+        this._sidebar = sidebar;
+        // Create and render menu (after sidebar is in DOM)
+        if (menu) {
+            this._menu = new Menu(`${this._id}-menu-instance`, {
+                ...menu,
+                orientation: 'vertical'
+            });
+            this._menu.render(`#${menuContainer.id}`);
+        }
+        // Trigger Iconify icon rendering
+        requestAnimationFrame(() => {
+            if (window.Iconify) {
+                window.Iconify.scan();
+            }
+        });
+        return this;
+    }
+}
+export function sidebar(id, options = {}) {
+    return new Sidebar(id, options);
+}