juxscript 1.1.251 → 1.1.253

package/dist/lib/components/input.d.ts

@@ -0,0 +1,43 @@
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'color' | 'range' | 'file' | 'hidden';
+interface InputOptions {
+    type?: InputType;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
+    pattern?: string;
+    autocomplete?: string;
+    class?: string;
+    style?: string;
+}
+declare class Input {
+    id: string;
+    options: InputOptions;
+    private _element;
+    private _wrapper;
+    private _onChange;
+    constructor(id: string, options?: InputOptions);
+    type(value: InputType): this;
+    label(value: string): this;
+    placeholder(value: string): this;
+    value(value: string): this;
+    name(value: string): this;
+    required(value?: boolean): this;
+    disabled(value?: boolean): this;
+    readonly(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    onChange(fn: (value: string, event: Event) => void): this;
+    getValue(): string;
+    setValue(val: string): this;
+    render(target?: string | HTMLElement): this;
+}
+export declare function input(id: string, options?: InputOptions): Input;
+export { Input, InputOptions };
+//# sourceMappingURL=input.d.ts.map

package/dist/lib/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../lib/components/input.ts"],"names":[],"mappings":"AAEA,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAElK,UAAU,YAAY;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,cAAM,KAAK;IACP,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAwD;gBAE7D,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IASlD,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAChC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACzB,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAKzD,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM3B,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;CA8CvC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAInE;AAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/components/input.js

@@ -0,0 +1,99 @@
+import generateId from '../utils/idgen.js';
+class Input {
+    constructor(id, options = {}) {
+        this._element = null;
+        this._wrapper = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.options = {
+            type: 'text',
+            ...options
+        };
+    }
+    // Fluent API
+    type(value) { this.options.type = value; return this; }
+    label(value) { this.options.label = value; return this; }
+    placeholder(value) { this.options.placeholder = value; return this; }
+    value(value) { this.options.value = value; if (this._element)
+        this._element.value = value; return this; }
+    name(value) { this.options.name = value; return this; }
+    required(value = true) { this.options.required = value; return this; }
+    disabled(value = true) { this.options.disabled = value; if (this._element)
+        this._element.disabled = value; return this; }
+    readonly(value = true) { this.options.readonly = value; return this; }
+    style(value) { this.options.style = value; return this; }
+    class(value) { this.options.class = value; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() {
+        return this._element?.value ?? this.options.value ?? '';
+    }
+    setValue(val) {
+        if (this._element)
+            this._element.value = val;
+        this.options.value = val;
+        return this;
+    }
+    render(target) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-input';
+        wrapper.id = `${this.id}-wrapper`;
+        if (this.options.class)
+            wrapper.className += ` ${this.options.class}`;
+        if (this.options.style)
+            wrapper.setAttribute('style', this.options.style);
+        if (this.options.label) {
+            const labelEl = document.createElement('label');
+            labelEl.htmlFor = this.id;
+            labelEl.textContent = this.options.label;
+            labelEl.className = 'jux-input-label';
+            wrapper.appendChild(labelEl);
+        }
+        const input = document.createElement('input');
+        input.id = this.id;
+        input.type = this.options.type || 'text';
+        input.className = 'jux-input-element';
+        if (this.options.placeholder)
+            input.placeholder = this.options.placeholder;
+        if (this.options.value)
+            input.value = this.options.value;
+        if (this.options.name)
+            input.name = this.options.name;
+        if (this.options.required)
+            input.required = true;
+        if (this.options.disabled)
+            input.disabled = true;
+        if (this.options.readonly)
+            input.readOnly = true;
+        if (this.options.min != null)
+            input.min = String(this.options.min);
+        if (this.options.max != null)
+            input.max = String(this.options.max);
+        if (this.options.step != null)
+            input.step = String(this.options.step);
+        if (this.options.pattern)
+            input.pattern = this.options.pattern;
+        if (this.options.autocomplete)
+            input.autocomplete = this.options.autocomplete;
+        input.addEventListener('input', (e) => {
+            if (this._onChange)
+                this._onChange(input.value, e);
+        });
+        wrapper.appendChild(input);
+        this._element = input;
+        this._wrapper = wrapper;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(wrapper);
+        return this;
+    }
+}
+export function input(id, options = {}) {
+    const inp = new Input(id, options);
+    inp.render();
+    return inp;
+}
+export { Input };

package/dist/lib/components/tag.d.ts

@@ -5,19 +5,19 @@ declare class Tag {
     tagName: string;
     constructor(data: any);
     modify(): this;
-    render(target?: string | HTMLElement): HTMLElement;
+    render(): HTMLElement;
 }
 export declare function tag(data: any): Tag;
-export declare function div(data: any): Tag;
-export declare function span(data: any): Tag;
-export declare function p(data: any): Tag;
-export declare function code(data: any): Tag;
-export declare function pre(data: any): Tag;
-export declare function h1(data: any): Tag;
-export declare function h2(data: any): Tag;
-export declare function h3(data: any): Tag;
-export declare function h4(data: any): Tag;
-export declare function h5(data: any): Tag;
-export declare function h6(data: any): Tag;
-export {};
+export declare function div(data?: any): Tag;
+export declare function span(data?: any): Tag;
+export declare function p(data?: any): Tag;
+export declare function code(data?: any): Tag;
+export declare function pre(data?: any): Tag;
+export declare function h1(data?: any): Tag;
+export declare function h2(data?: any): Tag;
+export declare function h3(data?: any): Tag;
+export declare function h4(data?: any): Tag;
+export declare function h5(data?: any): Tag;
+export declare function h6(data?: any): Tag;
+export default tag;
 //# sourceMappingURL=tag.d.ts.map

package/dist/lib/components/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAEA,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;gBAEJ,IAAI,EAAE,GAAG;IAOrB,MAAM;IAIN,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;CAoBvC;AAED,wBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,OAI5B;AAED,wBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,OAA8C;AAC3E,wBAAgB,IAAI,CAAC,IAAI,EAAE,GAAG,OAA+C;AAC7E,wBAAgB,CAAC,CAAC,IAAI,EAAE,GAAG,OAA4C;AACvE,wBAAgB,IAAI,CAAC,IAAI,EAAE,GAAG,OAA+C;AAC7E,wBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,OAA8C;AAC3E,wBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,OAA6C;AACzE,wBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,OAA6C;AACzE,wBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,OAA6C;AACzE,wBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,OAA6C;AACzE,wBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,OAA6C;AACzE,wBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,OAA6C"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAEA,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;gBAEJ,IAAI,EAAE,GAAG;IAOrB,MAAM;IAIN,MAAM;CAWT;AAED,wBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,OAI5B;AAED,wBAAgB,GAAG,CAAC,IAAI,GAAE,GAAQ,OAA8C;AAChF,wBAAgB,IAAI,CAAC,IAAI,GAAE,GAAQ,OAA+C;AAClF,wBAAgB,CAAC,CAAC,IAAI,GAAE,GAAQ,OAA4C;AAC5E,wBAAgB,IAAI,CAAC,IAAI,GAAE,GAAQ,OAA+C;AAClF,wBAAgB,GAAG,CAAC,IAAI,GAAE,GAAQ,OAA8C;AAChF,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAE9E,eAAe,GAAG,CAAC"}

package/dist/lib/components/tag.js

@@ -9,23 +9,15 @@ class Tag {
     modify() {
         return this;
     }
-    render(target) {
+    render() {
         const el = document.createElement(this.tagName);
         el.id = this.id;
         el.textContent = this.content;
         for (const [key, value] of Object.entries(this.options)) {
             el.setAttribute(key, String(value));
         }
-        if (target) {
-            const container = typeof target === 'string'
-                ? document.getElementById(target) || document.querySelector(target)
-                : target;
-            container?.appendChild(el);
-        }
-        else {
-            const app = document.getElementById('app');
-            app?.appendChild(el);
-        }
+        const app = document.getElementById('app');
+        app?.appendChild(el);
         return el;
     }
 }
@@ -34,14 +26,15 @@ export function tag(data) {
     t.render();
     return t;
 }
-export function div(data) { return tag({ ...data, tagName: 'div' }); }
-export function span(data) { return tag({ ...data, tagName: 'span' }); }
-export function p(data) { return tag({ ...data, tagName: 'p' }); }
-export function code(data) { return tag({ ...data, tagName: 'code' }); }
-export function pre(data) { return tag({ ...data, tagName: 'pre' }); }
-export function h1(data) { return tag({ ...data, tagName: 'h1' }); }
-export function h2(data) { return tag({ ...data, tagName: 'h2' }); }
-export function h3(data) { return tag({ ...data, tagName: 'h3' }); }
-export function h4(data) { return tag({ ...data, tagName: 'h4' }); }
-export function h5(data) { return tag({ ...data, tagName: 'h5' }); }
-export function h6(data) { return tag({ ...data, tagName: 'h6' }); }
+export function div(data = {}) { return tag({ ...data, tagName: 'div' }); }
+export function span(data = {}) { return tag({ ...data, tagName: 'span' }); }
+export function p(data = {}) { return tag({ ...data, tagName: 'p' }); }
+export function code(data = {}) { return tag({ ...data, tagName: 'code' }); }
+export function pre(data = {}) { return tag({ ...data, tagName: 'pre' }); }
+export function h1(data = {}) { return tag({ ...data, tagName: 'h1' }); }
+export function h2(data = {}) { return tag({ ...data, tagName: 'h2' }); }
+export function h3(data = {}) { return tag({ ...data, tagName: 'h3' }); }
+export function h4(data = {}) { return tag({ ...data, tagName: 'h4' }); }
+export function h5(data = {}) { return tag({ ...data, tagName: 'h5' }); }
+export function h6(data = {}) { return tag({ ...data, tagName: 'h6' }); }
+export default tag;

package/dist/lib/index.d.ts

@@ -1,5 +1,6 @@
-import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre } from "./components/tag";
-import { include } from "./components/include";
+import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre } from "./components/tag.js";
+import { include } from "./components/include.js";
+import { input } from "./components/input.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -13,5 +14,6 @@ export declare const jux: {
     span: typeof span;
     pre: typeof pre;
     include: typeof include;
+    input: typeof input;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,eAAO,MAAM,GAAG;;;;;;;;;;;;;CASf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;CASf,CAAA"}

package/dist/lib/index.js

@@ -1,5 +1,6 @@
-import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre } from "./components/tag";
-import { include } from "./components/include";
+import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre } from "./components/tag.js";
+import { include } from "./components/include.js";
+import { input } from "./components/input.js";
 export const jux = {
     tag,
     div,
@@ -7,5 +8,6 @@ export const jux = {
     p,
     span,
     pre,
-    include
+    include,
+    input
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.251",
+  "version": "1.1.253",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",