juxscript 1.1.4 → 1.1.6

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

@@ -0,0 +1,14 @@
+/**
+ * Style - Inject inline CSS into the document
+ * For external stylesheets, use Import component instead
+ * Auto-renders when created or modified
+ */
+export declare class Style {
+    private _id;
+    private css;
+    constructor(css: string, id?: string);
+    render(): this;
+    remove(): void;
+}
+export declare function style(css: string, id?: string): Style;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,KAAK;IAChB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,GAAG,CAAS;gBAER,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM;IAMpC,MAAM,IAAI,IAAI;IAcd,MAAM,IAAI,IAAI;CAMf;AAGD,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAErD"}

package/lib/components/style.js

@@ -0,0 +1,33 @@
+/**
+ * Style - Inject inline CSS into the document
+ * For external stylesheets, use Import component instead
+ * Auto-renders when created or modified
+ */
+export class Style {
+    constructor(css, id) {
+        // 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() {
+        // 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() {
+        const existing = document.getElementById(this._id);
+        if (existing) {
+            existing.remove();
+        }
+    }
+}
+// ✅ ID is optional
+export function style(css, id) {
+    return new Style(css, id);
+}

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);
+}

package/lib/components/switch.d.ts

@@ -0,0 +1,32 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+export interface SwitchOptions {
+    checked?: boolean;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    style?: string;
+    class?: string;
+    onValidate?: (checked: boolean) => boolean | string;
+}
+interface SwitchState extends FormInputState {
+    checked: boolean;
+    value: string;
+}
+export declare class Switch extends FormInput<SwitchState> {
+    constructor(id: string, options?: SwitchOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    checked(value: boolean): this;
+    value(value: string): this;
+    toggle(): this;
+    getValue(): boolean;
+    setValue(value: boolean): this;
+    protected _validateValue(checked: boolean): boolean | string;
+    protected _buildInputElement(): HTMLElement;
+    render(targetId?: string): this;
+}
+export declare function switchComponent(id: string, options?: SwitchOptions): Switch;
+export {};
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAMhE,MAAM,WAAW,aAAa;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,CAAC;CACvD;AAED,UAAU,WAAY,SAAQ,cAAc;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;gBAClC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAkBnD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,MAAM,IAAI,IAAI;IAQd,QAAQ,IAAI,OAAO;IAInB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAQ9B,SAAS,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM;IAiB5D,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAoB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAiHlC;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAE/E"}

package/lib/components/switch.js

@@ -0,0 +1,186 @@
+import { FormInput } from './base/FormInput.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['change'];
+export class Switch extends FormInput {
+    constructor(id, options = {}) {
+        super(id, {
+            checked: options.checked ?? false,
+            value: options.value ?? 'on',
+            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;
+        }
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
+    checked(value) {
+        return this.setValue(value);
+    }
+    value(value) {
+        this.state.value = value;
+        return this;
+    }
+    toggle() {
+        return this.setValue(!this.state.checked);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
+    getValue() {
+        return this.state.checked;
+    }
+    setValue(value) {
+        this.state.checked = value;
+        if (this._inputElement) {
+            this._inputElement.checked = value;
+        }
+        return this;
+    }
+    _validateValue(checked) {
+        const { required } = this.state;
+        if (required && !checked) {
+            return 'This field must be enabled';
+        }
+        if (this._onValidate) {
+            const result = this._onValidate(checked);
+            if (result !== true) {
+                return result || 'Invalid value';
+            }
+        }
+        return true;
+    }
+    _buildInputElement() {
+        const { checked, value, required, disabled, name } = this.state;
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'jux-switch-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.value = value;
+        input.checked = checked;
+        input.required = required;
+        input.disabled = disabled;
+        return input;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { style, class: className } = this.state;
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-switch';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        // Switch container
+        const switchContainer = document.createElement('label');
+        switchContainer.className = 'jux-switch-container';
+        switchContainer.htmlFor = `${this._id}-input`;
+        // Input element
+        const inputEl = this._buildInputElement();
+        this._inputElement = inputEl;
+        switchContainer.appendChild(inputEl);
+        // Toggle slider
+        const slider = document.createElement('span');
+        slider.className = 'jux-switch-slider';
+        switchContainer.appendChild(slider);
+        // Label text
+        if (this.state.label) {
+            const labelText = document.createElement('span');
+            labelText.className = 'jux-switch-label-text';
+            labelText.textContent = this.state.label;
+            if (this.state.required) {
+                const requiredSpan = document.createElement('span');
+                requiredSpan.className = 'jux-input-required';
+                requiredSpan.textContent = ' *';
+                labelText.appendChild(requiredSpan);
+            }
+            switchContainer.appendChild(labelText);
+        }
+        wrapper.appendChild(switchContainer);
+        // Error element
+        wrapper.appendChild(this._renderError());
+        // Wire events
+        this._wireStandardEvents(wrapper);
+        // Wire switch-specific sync (maps 'checked' to 'value' property for consistency)
+        const valueSync = this._syncBindings.find(b => b.property === 'value' || b.property === 'checked');
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+            const transformToState = toState || ((v) => v);
+            const transformToComponent = toComponent || ((v) => Boolean(v));
+            let isUpdating = false;
+            // State → Component
+            stateObj.subscribe((val) => {
+                if (isUpdating)
+                    return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+            // Component → State
+            inputEl.addEventListener('change', () => {
+                if (isUpdating)
+                    return;
+                isUpdating = true;
+                const checked = inputEl.checked;
+                this.state.checked = checked;
+                this._clearError();
+                const transformed = transformToState(checked);
+                stateObj.set(transformed);
+                // 🎯 Fire the change callback event
+                this._triggerCallback('change', checked);
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        }
+        else {
+            // Default behavior without sync
+            inputEl.addEventListener('change', () => {
+                this.state.checked = inputEl.checked;
+                this._clearError();
+                // 🎯 Fire the change callback event
+                this._triggerCallback('change', inputEl.checked);
+            });
+        }
+        // Always add blur validation
+        inputEl.addEventListener('blur', () => {
+            this.validate();
+        });
+        // Sync label changes
+        const labelSync = this._syncBindings.find(b => b.property === 'label');
+        if (labelSync) {
+            const transform = labelSync.toComponent || ((v) => String(v));
+            labelSync.stateObj.subscribe((val) => {
+                this.label(transform(val));
+            });
+        }
+        container.appendChild(wrapper);
+        return this;
+    }
+}
+export function switchComponent(id, options = {}) {
+    return new Switch(id, options);
+}