juxscript 1.0.132 → 1.1.2

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.ts

@@ -0,0 +1,275 @@
+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

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