juxscript 1.0.2 → 1.0.4

package/lib/components/checkbox.ts

@@ -0,0 +1,228 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+/**
+ * Checkbox component options
+ */
+export interface CheckboxOptions {
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    onChange?: (checked: boolean) => void;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Checkbox component state
+ */
+type CheckboxState = {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+    style: string;
+    class: string;
+};
+
+/**
+ * Checkbox component - Boolean input with label
+ * 
+ * Usage:
+ *   jux.checkbox('agree', {
+ *     label: 'I agree to the terms',
+ *     checked: false,
+ *     onChange: (checked) => console.log(checked)
+ *   }).render('#form');
+ * 
+ *   // Two-way binding
+ *   const agreedState = state(false);
+ *   jux.checkbox('agree').label('I agree').bind(agreedState).render('#form');
+ */
+export class Checkbox {
+    state: CheckboxState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _onChange?: (checked: boolean) => void;
+    private _boundState?: State<boolean>;
+
+    constructor(id: string, options: CheckboxOptions = {}) {
+        this._id = id;
+        this.id = id;
+        this._onChange = options.onChange;
+
+        this.state = {
+            label: options.label ?? '',
+            checked: options.checked ?? false,
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            value: options.value ?? 'on',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    label(value: string): this {
+        this.state.label = value;
+        return this;
+    }
+
+    checked(value: boolean): this {
+        this.state.checked = value;
+        this._updateElement();
+        return this;
+    }
+
+    disabled(value: boolean): this {
+        this.state.disabled = value;
+        this._updateElement();
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    value(value: string): this {
+        this.state.value = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    onChange(handler: (checked: boolean) => void): this {
+        this._onChange = handler;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<boolean>): this {
+        this._boundState = stateObj;
+
+        // Update checkbox when state changes
+        stateObj.subscribe((val) => {
+            this.state.checked = val;
+            this._updateElement();
+        });
+
+        // Update state when checkbox changes
+        this.onChange((checked) => stateObj.set(checked));
+
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
+        if (input) {
+            input.checked = this.state.checked;
+            input.disabled = this.state.disabled;
+        }
+    }
+
+    /**
+     * Get current checked state
+     */
+    isChecked(): boolean {
+        return this.state.checked;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Checkbox: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { label, checked, disabled, name, value, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-checkbox';
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-checkbox-label';
+
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'jux-checkbox-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.value = value;
+        input.checked = checked;
+        input.disabled = disabled;
+
+        input.addEventListener('change', (e) => {
+            const target = e.target as HTMLInputElement;
+            this.state.checked = target.checked;
+            if (this._onChange) {
+                this._onChange(target.checked);
+            }
+        });
+
+        labelEl.appendChild(input);
+
+        if (label) {
+            const span = document.createElement('span');
+            span.className = 'jux-checkbox-text';
+            span.textContent = label;
+            labelEl.appendChild(span);
+        }
+
+        wrapper.appendChild(labelEl);
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Checkbox.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function checkbox(id: string, options: CheckboxOptions = {}): Checkbox {
+    return new Checkbox(id, options);
+}

package/lib/components/code.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Code component options
@@ -6,11 +6,10 @@ import { Reactive, getOrCreateContainer } from './reactivity.js';
 export interface CodeOptions {
   code?: string;
   language?: string;
-  title?: string | null;
-  showLineNumbers?: boolean;
-  highlightLines?: number[];
-  maxHeight?: string | null;
-  wrap?: boolean;
+  lineNumbers?: boolean;
+  highlight?: boolean;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -19,48 +18,42 @@ export interface CodeOptions {
 type CodeState = {
   code: string;
   language: string;
-  title: string | null;
-  showLineNumbers: boolean;
-  highlightLines: number[];
-  maxHeight: string | null;
-  wrap: boolean;
+  lineNumbers: boolean;
+  highlight: boolean;
+  style: string;
+  class: string;
 };
 
 /**
- * Code component - displays formatted code blocks with syntax highlighting
+ * Code component
  *
  * Usage:
- *   const codeBlock = jux.code('myCode', {
- *     code: 'const x = 42;',
- *     language: 'javascript',
- *     title: 'Example Code',
- *     showLineNumbers: true
- *   });
- *   codeBlock.render();
+ *   const code = jux.code('myCode', 'console.log("hello")', 'javascript');
+ *   code.render();
  */
-export class Code extends Reactive {
-  state!: CodeState;
+export class Code {
+  state: CodeState;
   container: HTMLElement | null = null;
-
-  constructor(componentId: string, options: CodeOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-
-    // Map 'jux' language to 'javascript' for syntax highlighting
-    let language = options.language || 'javascript';
-    if (language === 'jux') {
-      language = 'javascript';
-    }
-
-    this.state = this._createReactiveState({
-      code: options.code ?? '',
-      language: language,
-      title: options.title ?? null,
-      showLineNumbers: options.showLineNumbers ?? false,
-      highlightLines: options.highlightLines ?? [],
-      maxHeight: options.maxHeight ?? null,
-      wrap: options.wrap ?? false
-    }) as CodeState;
+  _id: string;
+  id: string;
+
+  constructor(
+    id: string,
+    content?: string,
+    language?: string,
+    options: CodeOptions = {}
+  ) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
+      code: content ?? options.code ?? '',
+      language: language ?? options.language ?? 'javascript',
+      lineNumbers: options.lineNumbers ?? false,
+      highlight: options.highlight ?? true,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -73,76 +66,37 @@ export class Code extends Reactive {
   }
 
   language(value: string): this {
-    this.state.language = value === 'jux' ? 'javascript' : value;
+    this.state.language = value;
     return this;
   }
 
-  title(value: string): this {
-    this.state.title = value;
+  lineNumbers(value: boolean): this {
+    this.state.lineNumbers = value;
     return this;
   }
 
-  showLineNumbers(value: boolean): this {
-    this.state.showLineNumbers = value;
+  highlight(value: boolean): this {
+    this.state.highlight = value;
     return this;
   }
 
-  highlightLines(value: number[]): this {
-    this.state.highlightLines = value;
+  style(value: string): this {
+    this.state.style = value;
     return this;
   }
 
-  maxHeight(value: string): this {
-    this.state.maxHeight = value;
+  class(value: string): this {
+    this.state.class = value;
     return this;
   }
 
-  wrap(value: boolean): this {
-    this.state.wrap = value;
-    return this;
-  }
-
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
-
-  private _escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
-  private _formatCode(): string {
-    const { code, showLineNumbers, highlightLines } = this.state;
-    const lines = code.split('\n');
-
-    if (!showLineNumbers) {
-      return `<code class="jux-code-block">${this._escapeHtml(code)}</code>`;
-    }
-
-    const formattedLines = lines
-      .map((line, index) => {
-        const lineNum = index + 1;
-        const isHighlighted = highlightLines.includes(lineNum);
-        const highlightClass = isHighlighted ? ' jux-code-line-highlighted' : '';
-
-        return `<div class="jux-code-line${highlightClass}">
-        <span class="jux-code-line-number">${lineNum}</span>
-        <span class="jux-code-line-content">${this._escapeHtml(line) || ' '}</span>
-      </div>`;
-      })
-      .join('');
-
-    return `<code class="jux-code-block jux-code-numbered">${formattedLines}</code>`;
-  }
-
   /* -------------------------
    * Render
    * ------------------------- */
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -150,71 +104,31 @@ export class Code extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
-    this.container = container;
-    const { language, title, maxHeight, wrap } = this.state;
-
-    container.innerHTML = '';
-    container.className = 'jux-code-container';
-    container.id = this._componentId;
-
-    // Title bar
-    if (title) {
-      const titleBar = document.createElement('div');
-      titleBar.className = 'jux-code-title-bar';
 
-      const titleEl = document.createElement('div');
-      titleEl.className = 'jux-code-title';
-      titleEl.textContent = title;
-
-      const langBadge = document.createElement('div');
-      langBadge.className = 'jux-code-language-badge';
-      langBadge.textContent = language;
+    this.container = container;
+    const { code, language, lineNumbers, highlight, style, class: className } = this.state;
 
-      titleBar.appendChild(titleEl);
-      titleBar.appendChild(langBadge);
-      container.appendChild(titleBar);
-    }
+    const pre = document.createElement('pre');
+    pre.className = lineNumbers ? 'jux-code line-numbers' : 'jux-code';
+    pre.id = this._id;
 
-    // Code block wrapper
-    const codeWrapper = document.createElement('div');
-    codeWrapper.className = 'jux-code-wrapper';
-    if (maxHeight) {
-      codeWrapper.style.maxHeight = maxHeight;
-      codeWrapper.style.overflowY = 'auto';
+    if (className) {
+      pre.className += ` ${className}`;
     }
 
-    // Pre element
-    const preEl = document.createElement('pre');
-    preEl.className = `jux-code-pre language-${language}`;
-    if (wrap) {
-      preEl.classList.add('jux-code-wrap');
+    if (style) {
+      pre.setAttribute('style', style);
     }
 
-    preEl.innerHTML = this._formatCode();
-
-    codeWrapper.appendChild(preEl);
-    container.appendChild(codeWrapper);
+    const codeEl = document.createElement('code');
+    codeEl.className = highlight ? `language-${language}` : '';
+    codeEl.textContent = code;
 
-    // Copy button
-    const copyBtn = document.createElement('button');
-    copyBtn.className = 'jux-code-copy-btn';
-    copyBtn.textContent = 'Copy';
-    container.appendChild(copyBtn);
+    pre.appendChild(codeEl);
+    container.appendChild(pre);
 
-    // Event binding - copy functionality
-    copyBtn.addEventListener('click', () => {
-      navigator.clipboard.writeText(this.state.code).then(() => {
-        copyBtn.textContent = 'Copied!';
-        setTimeout(() => {
-          copyBtn.textContent = 'Copy';
-        }, 2000);
-      });
-    });
-
-    this.emit('rendered');
     return this;
   }
 
@@ -225,18 +139,18 @@ export class Code extends Reactive {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Code.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Code.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Code.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function code(componentId: string, options: CodeOptions = {}): Code {
-  return new Code(componentId, options);
+export function code(id: string, content?: string, language?: string): Code {
+  return new Code(id, content, language);
 }