juxscript 1.0.4 → 1.0.6

package/lib/components/input.ts

@@ -13,7 +13,14 @@ export interface InputOptions {
   disabled?: boolean;
   name?: string;
   rows?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
   onChange?: (value: string) => void;
+  onValidate?: (value: string) => boolean | string;
   style?: string;
   class?: string;
 }
@@ -30,23 +37,40 @@ type InputState = {
   disabled: boolean;
   name: string;
   rows: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
   style: string;
   class: string;
+  errorMessage?: string;
 };
 
 /**
- * Input component - text input and textarea
+ * Input component - text input and textarea with validation
  * 
  * Usage:
  *   jux.input('username')
  *     .label('Username')
  *     .placeholder('Enter username')
  *     .required(true)
+ *     .minLength(3)
+ *     .maxLength(20)
+ *     .render('#form');
+ * 
+ *   jux.input('age')
+ *     .type('number')
+ *     .min(0)
+ *     .max(120)
+ *     .step(1)
  *     .render('#form');
  * 
  *   jux.input('bio')
  *     .type('textarea')
  *     .rows(5)
+ *     .maxLength(500)
  *     .render('#form');
  */
 export class Input {
@@ -55,12 +79,14 @@ export class Input {
   _id: string;
   id: string;
   private _onChange?: (value: string) => void;
+  private _onValidate?: (value: string) => boolean | string;
   private _boundState?: State<string>;
 
   constructor(id: string, options: InputOptions = {}) {
     this._id = id;
     this.id = id;
     this._onChange = options.onChange;
+    this._onValidate = options.onValidate;
 
     this.state = {
       type: options.type ?? 'text',
@@ -71,6 +97,12 @@ export class Input {
       disabled: options.disabled ?? false,
       name: options.name ?? id,
       rows: options.rows ?? 3,
+      min: options.min,
+      max: options.max,
+      step: options.step,
+      minLength: options.minLength,
+      maxLength: options.maxLength,
+      pattern: options.pattern,
       style: options.style ?? '',
       class: options.class ?? ''
     };
@@ -85,8 +117,8 @@ export class Input {
     return this;
   }
 
-  value(value: string): this {
-    this.state.value = value;
+  value(value: string | number): this {
+    this.state.value = String(value);
     this._updateElement();
     return this;
   }
@@ -122,6 +154,60 @@ export class Input {
     return this;
   }
 
+  /**
+   * Minimum value for number inputs
+   */
+  min(value: number): this {
+    this.state.min = value;
+    this._updateElement();
+    return this;
+  }
+
+  /**
+   * Maximum value for number inputs
+   */
+  max(value: number): this {
+    this.state.max = value;
+    this._updateElement();
+    return this;
+  }
+
+  /**
+   * Step value for number inputs
+   */
+  step(value: number): this {
+    this.state.step = value;
+    this._updateElement();
+    return this;
+  }
+
+  /**
+   * Minimum length for text inputs
+   */
+  minLength(value: number): this {
+    this.state.minLength = value;
+    this._updateElement();
+    return this;
+  }
+
+  /**
+   * Maximum length for text inputs
+   */
+  maxLength(value: number): this {
+    this.state.maxLength = value;
+    this._updateElement();
+    return this;
+  }
+
+  /**
+   * Pattern validation for text inputs (regex)
+   */
+  pattern(value: string): this {
+    this.state.pattern = value;
+    this._updateElement();
+    return this;
+  }
+
   style(value: string): this {
     this.state.style = value;
     return this;
@@ -137,6 +223,15 @@ export class Input {
     return this;
   }
 
+  /**
+   * Custom validation function
+   * Should return true if valid, or an error message string if invalid
+   */
+  onValidate(handler: (value: string) => boolean | string): this {
+    this._onValidate = handler;
+    return this;
+  }
+
   /**
    * Two-way binding to state
    */
@@ -155,6 +250,112 @@ export class Input {
     return this;
   }
 
+  /* -------------------------
+   * Validation
+   * ------------------------- */
+
+  private _validate(value: string): boolean | string {
+    const { required, type, min, max, minLength, maxLength, pattern } = this.state;
+
+    // Required check
+    if (required && !value.trim()) {
+      return 'This field is required';
+    }
+
+    // Number validation
+    if (type === 'number' && value) {
+      const numValue = Number(value);
+
+      if (isNaN(numValue)) {
+        return 'Must be a valid number';
+      }
+
+      if (min !== undefined && numValue < min) {
+        return `Must be at least ${min}`;
+      }
+
+      if (max !== undefined && numValue > max) {
+        return `Must be at most ${max}`;
+      }
+    }
+
+    // Text length validation
+    if ((type === 'text' || type === 'textarea') && value) {
+      if (minLength !== undefined && value.length < minLength) {
+        return `Must be at least ${minLength} characters`;
+      }
+
+      if (maxLength !== undefined && value.length > maxLength) {
+        return `Must be at most ${maxLength} characters`;
+      }
+    }
+
+    // Pattern validation
+    if (pattern && value) {
+      const regex = new RegExp(pattern);
+      if (!regex.test(value)) {
+        return 'Invalid format';
+      }
+    }
+
+    // Custom validation
+    if (this._onValidate) {
+      const result = this._onValidate(value);
+      if (result !== true) {
+        return result || 'Invalid value';
+      }
+    }
+
+    return true;
+  }
+
+  private _showError(message: string): void {
+    const errorEl = document.getElementById(`${this._id}-error`);
+    const inputEl = document.getElementById(`${this._id}-input`);
+
+    if (errorEl) {
+      errorEl.textContent = message;
+      errorEl.style.display = 'block';
+    }
+
+    if (inputEl) {
+      inputEl.classList.add('jux-input-invalid');
+    }
+
+    this.state.errorMessage = message;
+  }
+
+  private _clearError(): void {
+    const errorEl = document.getElementById(`${this._id}-error`);
+    const inputEl = document.getElementById(`${this._id}-input`);
+
+    if (errorEl) {
+      errorEl.textContent = '';
+      errorEl.style.display = 'none';
+    }
+
+    if (inputEl) {
+      inputEl.classList.remove('jux-input-invalid');
+    }
+
+    this.state.errorMessage = undefined;
+  }
+
+  /**
+   * Manually validate the current value
+   */
+  validate(): boolean {
+    const result = this._validate(this.state.value);
+
+    if (result === true) {
+      this._clearError();
+      return true;
+    } else {
+      this._showError(result as string);
+      return false;
+    }
+  }
+
   /* -------------------------
    * Helpers
    * ------------------------- */
@@ -164,6 +365,20 @@ export class Input {
     if (input) {
       input.value = this.state.value;
       input.disabled = this.state.disabled;
+
+      if (input instanceof HTMLInputElement) {
+        if (this.state.min !== undefined) input.min = String(this.state.min);
+        if (this.state.max !== undefined) input.max = String(this.state.max);
+        if (this.state.step !== undefined) input.step = String(this.state.step);
+        if (this.state.minLength !== undefined) input.minLength = this.state.minLength;
+        if (this.state.maxLength !== undefined) input.maxLength = this.state.maxLength;
+        if (this.state.pattern) input.pattern = this.state.pattern;
+      }
+
+      if (input instanceof HTMLTextAreaElement) {
+        if (this.state.minLength !== undefined) input.minLength = this.state.minLength;
+        if (this.state.maxLength !== undefined) input.maxLength = this.state.maxLength;
+      }
     }
   }
 
@@ -171,6 +386,15 @@ export class Input {
     return this.state.value;
   }
 
+  getNumericValue(): number | null {
+    const num = Number(this.state.value);
+    return isNaN(num) ? null : num;
+  }
+
+  isValid(): boolean {
+    return this._validate(this.state.value) === true;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
@@ -189,7 +413,7 @@ export class Input {
     }
 
     this.container = container;
-    const { type, value, placeholder, label, required, disabled, name, rows, style, class: className } = this.state;
+    const { type, value, placeholder, label, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern, style, class: className } = this.state;
 
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-input';
@@ -224,9 +448,25 @@ export class Input {
     if (type === 'textarea') {
       inputEl = document.createElement('textarea');
       inputEl.rows = rows;
+      if (minLength !== undefined) inputEl.minLength = minLength;
+      if (maxLength !== undefined) inputEl.maxLength = maxLength;
     } else {
       inputEl = document.createElement('input');
       inputEl.type = type;
+
+      // Number-specific attributes
+      if (type === 'number') {
+        if (min !== undefined) inputEl.min = String(min);
+        if (max !== undefined) inputEl.max = String(max);
+        if (step !== undefined) inputEl.step = String(step);
+      }
+
+      // Text-specific attributes
+      if (type === 'text' || type === 'email' || type === 'tel' || type === 'url') {
+        if (minLength !== undefined) inputEl.minLength = minLength;
+        if (maxLength !== undefined) inputEl.maxLength = maxLength;
+        if (pattern) inputEl.pattern = pattern;
+      }
     }
 
     inputEl.className = 'jux-input-element';
@@ -237,19 +477,122 @@ export class Input {
     inputEl.required = required;
     inputEl.disabled = disabled;
 
+    // Input event handler
     inputEl.addEventListener('input', (e) => {
       const target = e.target as HTMLInputElement | HTMLTextAreaElement;
       this.state.value = target.value;
+
+      // Clear error on input
+      this._clearError();
+
       if (this._onChange) {
         this._onChange(target.value);
       }
     });
 
+    // Blur event for validation
+    inputEl.addEventListener('blur', () => {
+      this.validate();
+    });
+
     wrapper.appendChild(inputEl);
+
+    // Error message element
+    const errorEl = document.createElement('div');
+    errorEl.className = 'jux-input-error';
+    errorEl.id = `${this._id}-error`;
+    errorEl.style.display = 'none';
+    wrapper.appendChild(errorEl);
+
+    // Character counter for maxLength
+    if (maxLength && (type === 'text' || type === 'textarea')) {
+      const counterEl = document.createElement('div');
+      counterEl.className = 'jux-input-counter';
+      counterEl.id = `${this._id}-counter`;
+      counterEl.textContent = `${value.length}/${maxLength}`;
+
+      inputEl.addEventListener('input', () => {
+        counterEl.textContent = `${inputEl.value.length}/${maxLength}`;
+      });
+
+      wrapper.appendChild(counterEl);
+    }
+
     container.appendChild(wrapper);
+
+    // Add default styles if not already present
+    this._injectDefaultStyles();
+
     return this;
   }
 
+  private _injectDefaultStyles(): void {
+    const styleId = 'jux-input-styles';
+    if (document.getElementById(styleId)) return;
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .jux-input {
+        margin-bottom: 16px;
+      }
+
+      .jux-input-label {
+        display: block;
+        margin-bottom: 6px;
+        font-weight: 500;
+        color: #374151;
+      }
+
+      .jux-input-required {
+        color: #ef4444;
+      }
+
+      .jux-input-element {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: border-color 0.2s;
+        box-sizing: border-box;
+      }
+
+      .jux-input-element:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      }
+
+      .jux-input-element:disabled {
+        background-color: #f3f4f6;
+        cursor: not-allowed;
+      }
+
+      .jux-input-element.jux-input-invalid {
+        border-color: #ef4444;
+      }
+
+      .jux-input-element.jux-input-invalid:focus {
+        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+      }
+
+      .jux-input-error {
+        color: #ef4444;
+        font-size: 12px;
+        margin-top: 4px;
+      }
+
+      .jux-input-counter {
+        text-align: right;
+        font-size: 12px;
+        color: #6b7280;
+        margin-top: 4px;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
   renderTo(juxComponent: any): this {
     if (!juxComponent?._id) {
       throw new Error('Input.renderTo: Invalid component');

package/lib/components/select.ts

@@ -1,22 +1,17 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
 
-/**
- * Select option
- */
 export interface SelectOption {
     label: string;
     value: string;
     disabled?: boolean;
 }
 
-/**
- * Select component options
- */
 export interface SelectOptions {
     options?: SelectOption[];
     value?: string;
     placeholder?: string;
+    label?: string;
     disabled?: boolean;
     name?: string;
     onChange?: (value: string) => void;
@@ -24,36 +19,17 @@ export interface SelectOptions {
     class?: string;
 }
 
-/**
- * Select component state
- */
 type SelectState = {
     options: SelectOption[];
     value: string;
     placeholder: string;
+    label: string;
     disabled: boolean;
     name: string;
     style: string;
     class: string;
 };
 
-/**
- * Select component - Dropdown select
- * 
- * Usage:
- *   jux.select('country', {
- *     placeholder: 'Select country',
- *     options: [
- *       { label: 'USA', value: 'us' },
- *       { label: 'Canada', value: 'ca' }
- *     ],
- *     onChange: (val) => console.log(val)
- *   }).render('#form');
- * 
- *   // Two-way binding
- *   const countryState = state('us');
- *   jux.select('country').bind(countryState).render('#form');
- */
 export class Select {
     state: SelectState;
     container: HTMLElement | null = null;
@@ -71,6 +47,7 @@ export class Select {
             options: options.options ?? [],
             value: options.value ?? '',
             placeholder: options.placeholder ?? 'Select...',
+            label: options.label ?? '',
             disabled: options.disabled ?? false,
             name: options.name ?? id,
             style: options.style ?? '',
@@ -78,10 +55,6 @@ export class Select {
         };
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
     options(value: SelectOption[]): this {
         this.state.options = value;
         return this;
@@ -103,6 +76,11 @@ export class Select {
         return this;
     }
 
+    label(value: string): this {
+        this.state.label = value;
+        return this;
+    }
+
     disabled(value: boolean): this {
         this.state.disabled = value;
         this._updateElement();
@@ -142,15 +120,17 @@ export class Select {
         });
 
         // Update state when select changes
-        this.onChange((value) => stateObj.set(value));
+        const originalOnChange = this._onChange;
+        this._onChange = (value) => {
+            stateObj.set(value);
+            if (originalOnChange) {
+                originalOnChange(value);
+            }
+        };
 
         return this;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-
     private _updateElement(): void {
         const select = document.getElementById(`${this._id}-select`) as HTMLSelectElement;
         if (select) {
@@ -163,10 +143,6 @@ export class Select {
         return this.state.value;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
-
     render(targetId?: string): this {
         let container: HTMLElement;
 
@@ -181,7 +157,7 @@ export class Select {
         }
 
         this.container = container;
-        const { options, value, placeholder, disabled, name, style, class: className } = this.state;
+        const { options, value, placeholder, label, disabled, name, style, class: className } = this.state;
 
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-select';
@@ -195,6 +171,15 @@ export class Select {
             wrapper.setAttribute('style', style);
         }
 
+        // Label
+        if (label) {
+            const labelEl = document.createElement('label');
+            labelEl.className = 'jux-select-label';
+            labelEl.htmlFor = `${this._id}-select`;
+            labelEl.textContent = label;
+            wrapper.appendChild(labelEl);
+        }
+
         const select = document.createElement('select');
         select.className = 'jux-select-element';
         select.id = `${this._id}-select`;
@@ -231,9 +216,57 @@ export class Select {
 
         wrapper.appendChild(select);
         container.appendChild(wrapper);
+
+        // Add default styles if not already present
+        this._injectDefaultStyles();
+
         return this;
     }
 
+    private _injectDefaultStyles(): void {
+        const styleId = 'jux-select-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            .jux-select {
+                margin-bottom: 16px;
+            }
+
+            .jux-select-label {
+                display: block;
+                margin-bottom: 6px;
+                font-weight: 500;
+                color: #374151;
+            }
+
+            .jux-select-element {
+                width: 100%;
+                padding: 8px 12px;
+                border: 1px solid #d1d5db;
+                border-radius: 6px;
+                font-size: 14px;
+                background: white;
+                cursor: pointer;
+                transition: border-color 0.2s;
+                box-sizing: border-box;
+            }
+
+            .jux-select-element:focus {
+                outline: none;
+                border-color: #3b82f6;
+                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            }
+
+            .jux-select-element:disabled {
+                background-color: #f3f4f6;
+                cursor: not-allowed;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
     renderTo(juxComponent: any): this {
         if (!juxComponent?._id) {
             throw new Error('Select.renderTo: Invalid component');

package/lib/components/sidebar.ts

@@ -49,7 +49,7 @@ export class Sidebar {
 
     this.state = {
       title: options.title ?? '',
-      width: options.width ?? '250px',
+      width: options.width ?? '300px',
       position: options.position ?? 'left',
       collapsible: options.collapsible ?? false,
       collapsed: options.collapsed ?? false,