juxscript 1.0.3 → 1.0.4

package/lib/components/fileupload.ts

@@ -0,0 +1,319 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * FileUpload component options
+ */
+export interface FileUploadOptions {
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    disabled?: boolean;
+    text?: string;
+    dragText?: string;
+    onChange?: (files: FileList) => void;
+    onError?: (error: string) => void;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * FileUpload component state
+ */
+type FileUploadState = {
+    accept: string;
+    multiple: boolean;
+    maxSize: number;
+    disabled: boolean;
+    text: string;
+    dragText: string;
+    style: string;
+    class: string;
+    files: File[];
+};
+
+/**
+ * FileUpload component - Drag & drop file input
+ * 
+ * Usage:
+ *   jux.fileupload('docs', {
+ *     accept: '.pdf,.doc,.docx',
+ *     multiple: true,
+ *     maxSize: 5242880, // 5MB
+ *     text: 'Click to upload or drag and drop',
+ *     onChange: (files) => console.log(files),
+ *     onError: (err) => console.error(err)
+ *   }).render('#form');
+ */
+export class FileUpload {
+    state: FileUploadState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _onChange?: (files: FileList) => void;
+    private _onError?: (error: string) => void;
+
+    constructor(id: string, options: FileUploadOptions = {}) {
+        this._id = id;
+        this.id = id;
+        this._onChange = options.onChange;
+        this._onError = options.onError;
+
+        this.state = {
+            accept: options.accept ?? '*',
+            multiple: options.multiple ?? false,
+            maxSize: options.maxSize ?? 10485760, // 10MB default
+            disabled: options.disabled ?? false,
+            text: options.text ?? 'Click to upload or drag and drop',
+            dragText: options.dragText ?? 'Drop files here',
+            style: options.style ?? '',
+            class: options.class ?? '',
+            files: []
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    accept(value: string): this {
+        this.state.accept = value;
+        return this;
+    }
+
+    multiple(value: boolean): this {
+        this.state.multiple = value;
+        return this;
+    }
+
+    maxSize(value: number): this {
+        this.state.maxSize = value;
+        return this;
+    }
+
+    disabled(value: boolean): this {
+        this.state.disabled = value;
+        return this;
+    }
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    dragText(value: string): this {
+        this.state.dragText = 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: (files: FileList) => void): this {
+        this._onChange = handler;
+        return this;
+    }
+
+    onError(handler: (error: string) => void): this {
+        this._onError = handler;
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _validateFiles(files: FileList): boolean {
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            if (file.size > this.state.maxSize) {
+                const maxMB = Math.round(this.state.maxSize / 1048576);
+                const error = `File "${file.name}" exceeds maximum size of ${maxMB}MB`;
+                if (this._onError) {
+                    this._onError(error);
+                }
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private _handleFiles(files: FileList): void {
+        if (this._validateFiles(files)) {
+            this.state.files = Array.from(files);
+            this._updateFileList();
+            if (this._onChange) {
+                this._onChange(files);
+            }
+        }
+    }
+
+    private _updateFileList(): void {
+        const fileList = document.getElementById(`${this._id}-list`);
+        if (fileList) {
+            fileList.innerHTML = '';
+            this.state.files.forEach((file, index) => {
+                const item = document.createElement('div');
+                item.className = 'jux-fileupload-file';
+
+                const name = document.createElement('span');
+                name.className = 'jux-fileupload-file-name';
+                name.textContent = file.name;
+
+                const size = document.createElement('span');
+                size.className = 'jux-fileupload-file-size';
+                const sizeKB = Math.round(file.size / 1024);
+                size.textContent = `${sizeKB} KB`;
+
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'jux-fileupload-file-remove';
+                removeBtn.textContent = '×';
+                removeBtn.addEventListener('click', () => {
+                    this.state.files.splice(index, 1);
+                    this._updateFileList();
+                });
+
+                item.appendChild(name);
+                item.appendChild(size);
+                item.appendChild(removeBtn);
+                fileList.appendChild(item);
+            });
+        }
+    }
+
+    getFiles(): File[] {
+        return this.state.files;
+    }
+
+    clear(): void {
+        this.state.files = [];
+        this._updateFileList();
+        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
+        if (input) {
+            input.value = '';
+        }
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`FileUpload: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { accept, multiple, disabled, text, dragText, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-fileupload';
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        // Hidden file input
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.className = 'jux-fileupload-input';
+        input.id = `${this._id}-input`;
+        input.accept = accept;
+        input.multiple = multiple;
+        input.disabled = disabled;
+
+        input.addEventListener('change', (e) => {
+            const target = e.target as HTMLInputElement;
+            if (target.files && target.files.length > 0) {
+                this._handleFiles(target.files);
+            }
+        });
+
+        // Drop zone
+        const dropzone = document.createElement('div');
+        dropzone.className = 'jux-fileupload-dropzone';
+
+        const icon = document.createElement('div');
+        icon.className = 'jux-fileupload-icon';
+        icon.textContent = '📁';
+
+        const textEl = document.createElement('div');
+        textEl.className = 'jux-fileupload-text';
+        textEl.textContent = text;
+
+        dropzone.appendChild(icon);
+        dropzone.appendChild(textEl);
+
+        // Click to open file dialog
+        dropzone.addEventListener('click', () => {
+            if (!disabled) {
+                input.click();
+            }
+        });
+
+        // Drag & drop
+        dropzone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            if (!disabled) {
+                dropzone.classList.add('jux-fileupload-dropzone-active');
+                textEl.textContent = dragText;
+            }
+        });
+
+        dropzone.addEventListener('dragleave', () => {
+            dropzone.classList.remove('jux-fileupload-dropzone-active');
+            textEl.textContent = text;
+        });
+
+        dropzone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropzone.classList.remove('jux-fileupload-dropzone-active');
+            textEl.textContent = text;
+
+            if (!disabled && e.dataTransfer?.files) {
+                this._handleFiles(e.dataTransfer.files);
+            }
+        });
+
+        // File list
+        const fileList = document.createElement('div');
+        fileList.className = 'jux-fileupload-list';
+        fileList.id = `${this._id}-list`;
+
+        wrapper.appendChild(input);
+        wrapper.appendChild(dropzone);
+        wrapper.appendChild(fileList);
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('FileUpload.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function fileupload(id: string, options: FileUploadOptions = {}): FileUpload {
+    return new FileUpload(id, options);
+}

package/lib/components/footer.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Footer component options
@@ -7,6 +7,8 @@ export interface FooterOptions {
   content?: string;
   copyright?: string;
   links?: Array<{ label: string; href: string }>;
+  class?: string;
+  style?: string;
 }
 
 /**
@@ -16,6 +18,8 @@ type FooterState = {
   content: string;
   copyright: string;
   links: Array<{ label: string; href: string }>;
+  class: string;
+  style: string;
 };
 
 /**
@@ -31,19 +35,23 @@ type FooterState = {
  *   });
  *   footer.render('#appfooter');
  */
-export class Footer extends Reactive {
-  state!: FooterState;
+export class Footer {
+  state: FooterState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: FooterOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: FooterOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       content: options.content ?? '',
       copyright: options.copyright ?? '',
-      links: options.links ?? []
-    }) as FooterState;
+      links: options.links ?? [],
+      class: options.class ?? '',
+      style: options.style ?? ''
+    };
   }
 
   /* -------------------------
@@ -65,6 +73,16 @@ export class Footer extends Reactive {
     return this;
   }
 
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
@@ -79,15 +97,16 @@ export class Footer extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    const { content, copyright, links } = this.state;
+    const { content, copyright, links, class: className, style } = this.state;
 
     const footer = document.createElement('footer');
-    footer.className = 'jux-footer';
-    footer.id = this._componentId;
+    footer.className = `jux-footer ${className}`.trim();
+    footer.style.cssText = style;
+    footer.id = this._id;
 
     if (content) {
       const contentEl = document.createElement('div');
@@ -130,17 +149,17 @@ export class Footer extends Reactive {
       throw new Error('Footer.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Footer.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Footer.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function footer(componentId: string, options: FooterOptions = {}): Footer {
-  return new Footer(componentId, options);
+export function footer(id: string, options: FooterOptions = {}): Footer {
+  return new Footer(id, options);
 }

package/lib/components/header.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Header component options
@@ -8,6 +8,8 @@ export interface HeaderOptions {
   logo?: string;
   navigation?: Array<{ label: string; href: string }>;
   sticky?: boolean;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -18,6 +20,8 @@ type HeaderState = {
   logo: string;
   navigation: Array<{ label: string; href: string }>;
   sticky: boolean;
+  style: string;
+  class: string;
 };
 
 /**
@@ -33,20 +37,24 @@ type HeaderState = {
  *   });
  *   header.render('#appheader');
  */
-export class Header extends Reactive {
-  state!: HeaderState;
+export class Header {
+  state: HeaderState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: HeaderOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: HeaderOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
       title: options.title ?? '',
       logo: options.logo ?? '',
       navigation: options.navigation ?? [],
-      sticky: options.sticky ?? true
-    }) as HeaderState;
+      sticky: options.sticky ?? true,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -73,13 +81,22 @@ export class Header extends Reactive {
     return this;
   }
 
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
   /* -------------------------
    * Render
    * ------------------------- */
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -87,47 +104,50 @@ export class Header extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { title, logo, navigation, sticky } = this.state;
-    
+    const { title, logo, navigation, sticky, style, class: className } = this.state;
+
     const header = document.createElement('header');
     header.className = 'jux-header';
-    header.id = this._componentId;
-    
+
+    header.id = this._id;
+    header.style.cssText = style;
+    header.className = `jux-header ${className}`.trim();
+
     if (sticky) {
       header.classList.add('jux-header-sticky');
     }
-    
+
     // Logo section
     if (logo || title) {
       const logoSection = document.createElement('div');
       logoSection.className = 'jux-header-logo';
-      
+
       if (logo) {
         const logoImg = document.createElement('img');
         logoImg.src = logo;
         logoImg.alt = title || 'Logo';
         logoSection.appendChild(logoImg);
       }
-      
+
       if (title) {
         const titleEl = document.createElement('span');
         titleEl.className = 'jux-header-title';
         titleEl.textContent = title;
         logoSection.appendChild(titleEl);
       }
-      
+
       header.appendChild(logoSection);
     }
-    
+
     // Navigation
     if (navigation.length > 0) {
       const nav = document.createElement('nav');
       nav.className = 'jux-header-nav';
-      
+
       navigation.forEach(item => {
         const link = document.createElement('a');
         link.className = 'jux-header-nav-item';
@@ -135,10 +155,10 @@ export class Header extends Reactive {
         link.textContent = item.label;
         nav.appendChild(link);
       });
-      
+
       header.appendChild(nav);
     }
-    
+
     container.appendChild(header);
     return this;
   }
@@ -150,18 +170,18 @@ export class Header extends Reactive {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Header.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Header.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Header.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function header(componentId: string, options: HeaderOptions = {}): Header {
-  return new Header(componentId, options);
+export function header(id: string, options: HeaderOptions = {}): Header {
+  return new Header(id, options);
 }