juxscript 1.1.2 → 1.1.4

package/lib/components/select.ts

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

@@ -1,275 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { Menu, MenuOptions } from './menu.js';
-
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['toggle'] as const;
-
-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 class Sidebar extends BaseComponent<SidebarState> {
-  private _sidebar: HTMLElement | null = null;
-  private _menu: Menu | null = null;
-
-  constructor(id: string, options: SidebarOptions = {}) {
-    // 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 ?? ''
-    });
-
-    // Listen for URL changes to update menu active states
-    if (typeof window !== 'undefined') {
-      window.addEventListener('popstate', () => this.refreshMenu());
-    }
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    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: string): this {
-    this.state.width = value;
-    return this;
-  }
-
-  position(value: 'left' | 'right'): this {
-    this.state.position = value;
-    return this;
-  }
-
-  collapsible(value: boolean): this {
-    this.state.collapsible = value;
-    return this;
-  }
-
-  showToggle(value: boolean): this {
-    this.state.showToggle = value;
-    return this;
-  }
-
-  expandOnHover(value: boolean): this {
-    this.state.expandOnHover = value;
-    return this;
-  }
-
-  collapsed(value: boolean): this {
-    this.state.collapsed = value;
-    this._updateCollapsedState();
-    return this;
-  }
-
-  menu(value: MenuOptions): this {
-    this.state.menu = value;
-    return this;
-  }
-
-  toggle(): void {
-    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(): this {
-    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;
-  }
-
-  private _updateCollapsedState(): void {
-    if (this._sidebar) {
-      this._sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
-    }
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string): this {
-    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: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const isCollapsed = Boolean(transformed);
-          this.state.collapsed = isCollapsed;
-          this._updateCollapsedState();
-        });
-      }
-      else if (property === 'menu') {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          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 as any).Iconify) {
-        (window as any).Iconify.scan();
-      }
-    });
-
-    return this;
-  }
-}
-
-export function sidebar(id: string, options: SidebarOptions = {}): Sidebar {
-  return new Sidebar(id, options);
-}

package/lib/components/style.ts

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