juxscript 1.1.253 → 1.1.255

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

@@ -0,0 +1,62 @@
+interface CheckboxOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    checked?: boolean;
+}
+interface CheckboxOptions {
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+}
+interface CheckboxGroupOptions {
+    label?: string;
+    options?: CheckboxOption[];
+    values?: string[];
+    direction?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+}
+declare class Checkbox {
+    id: string;
+    opts: CheckboxOptions;
+    private _element;
+    private _wrapper;
+    private _onChange;
+    constructor(id: string, options?: CheckboxOptions);
+    label(value: string): this;
+    checked(value?: boolean): this;
+    disabled(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    onChange(fn: (checked: boolean, event: Event) => void): this;
+    getValue(): boolean;
+    render(target?: string | HTMLElement): this;
+}
+declare class CheckboxGroup {
+    id: string;
+    opts: CheckboxGroupOptions;
+    private _wrapper;
+    private _inputs;
+    private _onChange;
+    constructor(id: string, options?: CheckboxGroupOptions);
+    label(value: string): this;
+    direction(value: 'vertical' | 'horizontal'): this;
+    disabled(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    options(opts: CheckboxOption[]): this;
+    values(vals: string[]): this;
+    onChange(fn: (values: string[], event: Event) => void): this;
+    getValues(): string[];
+    private _rebuild;
+    private _buildOptions;
+    render(target?: string | HTMLElement): this;
+}
+export declare function checkbox(id: string, options?: CheckboxOptions): Checkbox;
+export declare function checkboxGroup(id: string, options?: CheckboxGroupOptions): CheckboxGroup;
+export { Checkbox, CheckboxGroup, CheckboxOption, CheckboxOptions, CheckboxGroupOptions };
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/checkbox.js

@@ -0,0 +1,175 @@
+import generateId from '../utils/idgen.js';
+// ═══════════════════════════════════════════════════════════
+// Standalone Checkbox (boolean toggle)
+// ═══════════════════════════════════════════════════════════
+class Checkbox {
+    constructor(id, options = {}) {
+        this._element = null;
+        this._wrapper = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = options;
+    }
+    label(value) { this.opts.label = value; return this; }
+    checked(value = true) { this.opts.checked = value; if (this._element)
+        this._element.checked = value; return this; }
+    disabled(value = true) { this.opts.disabled = value; if (this._element)
+        this._element.disabled = value; return this; }
+    style(value) { this.opts.style = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() {
+        return this._element?.checked ?? this.opts.checked ?? false;
+    }
+    render(target) {
+        const wrapper = document.createElement('label');
+        wrapper.className = 'jux-checkbox';
+        wrapper.id = `${this.id}-wrapper`;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        const inp = document.createElement('input');
+        inp.type = 'checkbox';
+        inp.id = this.id;
+        inp.className = 'jux-checkbox-input';
+        if (this.opts.checked)
+            inp.checked = true;
+        if (this.opts.disabled)
+            inp.disabled = true;
+        inp.addEventListener('change', (e) => {
+            if (this._onChange)
+                this._onChange(inp.checked, e);
+        });
+        wrapper.appendChild(inp);
+        if (this.opts.label) {
+            const text = document.createElement('span');
+            text.className = 'jux-checkbox-label';
+            text.textContent = this.opts.label;
+            wrapper.appendChild(text);
+        }
+        this._element = inp;
+        this._wrapper = wrapper;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(wrapper);
+        return this;
+    }
+}
+// ═══════════════════════════════════════════════════════════
+// CheckboxGroup (multi-select from options)
+// ═══════════════════════════════════════════════════════════
+class CheckboxGroup {
+    constructor(id, options = {}) {
+        this._wrapper = null;
+        this._inputs = [];
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            options: [],
+            values: [],
+            direction: 'vertical',
+            ...options
+        };
+    }
+    label(value) { this.opts.label = value; return this; }
+    direction(value) { this.opts.direction = value; return this; }
+    disabled(value = true) { this.opts.disabled = value; return this; }
+    style(value) { this.opts.style = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    options(opts) {
+        this.opts.options = opts;
+        if (this._wrapper)
+            this._rebuild();
+        return this;
+    }
+    values(vals) {
+        this.opts.values = vals;
+        this._inputs.forEach(inp => {
+            inp.checked = vals.includes(inp.value);
+        });
+        return this;
+    }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValues() {
+        return this._inputs.filter(i => i.checked).map(i => i.value);
+    }
+    _rebuild() {
+        if (!this._wrapper)
+            return;
+        const group = this._wrapper.querySelector('.jux-checkbox-options');
+        if (!group)
+            return;
+        group.innerHTML = '';
+        this._inputs = [];
+        this._buildOptions(group);
+    }
+    _buildOptions(container) {
+        for (const opt of this.opts.options || []) {
+            const item = document.createElement('label');
+            item.className = 'jux-checkbox-item';
+            const inp = document.createElement('input');
+            inp.type = 'checkbox';
+            inp.value = opt.value;
+            inp.className = 'jux-checkbox-input';
+            if (opt.checked || this.opts.values?.includes(opt.value))
+                inp.checked = true;
+            if (opt.disabled || this.opts.disabled)
+                inp.disabled = true;
+            inp.addEventListener('change', (e) => {
+                if (this._onChange)
+                    this._onChange(this.getValues(), e);
+            });
+            const text = document.createElement('span');
+            text.className = 'jux-checkbox-label';
+            text.textContent = opt.label;
+            item.appendChild(inp);
+            item.appendChild(text);
+            container.appendChild(item);
+            this._inputs.push(inp);
+        }
+    }
+    render(target) {
+        const wrapper = document.createElement('fieldset');
+        wrapper.className = 'jux-checkbox-group';
+        wrapper.id = this.id;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        if (this.opts.label) {
+            const legend = document.createElement('legend');
+            legend.textContent = this.opts.label;
+            legend.className = 'jux-checkbox-group-label';
+            wrapper.appendChild(legend);
+        }
+        const optionsDiv = document.createElement('div');
+        optionsDiv.className = `jux-checkbox-options jux-checkbox-${this.opts.direction}`;
+        this._buildOptions(optionsDiv);
+        wrapper.appendChild(optionsDiv);
+        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 checkbox(id, options = {}) {
+    const c = new Checkbox(id, options);
+    c.render();
+    return c;
+}
+export function checkboxGroup(id, options = {}) {
+    const g = new CheckboxGroup(id, options);
+    g.render();
+    return g;
+}
+export { Checkbox, CheckboxGroup };

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

@@ -0,0 +1,40 @@
+interface RadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface RadioGroupOptions {
+    label?: string;
+    name?: string;
+    options?: RadioOption[];
+    value?: string;
+    direction?: 'vertical' | 'horizontal';
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+}
+declare class RadioGroup {
+    id: string;
+    opts: RadioGroupOptions;
+    private _wrapper;
+    private _inputs;
+    private _onChange;
+    constructor(id: string, options?: RadioGroupOptions);
+    label(value: string): this;
+    direction(value: 'vertical' | 'horizontal'): this;
+    required(value?: boolean): this;
+    disabled(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    options(opts: RadioOption[]): this;
+    value(val: string): this;
+    onChange(fn: (value: string, event: Event) => void): this;
+    getValue(): string;
+    private _rebuild;
+    private _buildOptions;
+    render(target?: string | HTMLElement): this;
+}
+export declare function radio(id: string, options?: RadioGroupOptions): RadioGroup;
+export { RadioGroup, RadioOption, RadioGroupOptions };
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../lib/components/radio.ts"],"names":[],"mappings":"AAEA,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,iBAAiB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,cAAM,UAAU;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,iBAAiB,CAAC;IACxB,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,SAAS,CAAwD;gBAE7D,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAWvD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI;IACjD,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,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI;IAMlC,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMxB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAKzD,QAAQ,IAAI,MAAM;IAKlB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,aAAa;IA6BrB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;CA4B9C;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAI7E;AAED,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/lib/components/radio.js

@@ -0,0 +1,110 @@
+import generateId from '../utils/idgen.js';
+class RadioGroup {
+    constructor(id, options = {}) {
+        this._wrapper = null;
+        this._inputs = [];
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            options: [],
+            direction: 'vertical',
+            name: id,
+            ...options
+        };
+    }
+    // Fluent API
+    label(value) { this.opts.label = value; return this; }
+    direction(value) { this.opts.direction = value; return this; }
+    required(value = true) { this.opts.required = value; return this; }
+    disabled(value = true) { this.opts.disabled = value; return this; }
+    style(value) { this.opts.style = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    options(opts) {
+        this.opts.options = opts;
+        if (this._wrapper)
+            this._rebuild();
+        return this;
+    }
+    value(val) {
+        this.opts.value = val;
+        this._inputs.forEach(inp => { inp.checked = inp.value === val; });
+        return this;
+    }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() {
+        const checked = this._inputs.find(i => i.checked);
+        return checked?.value ?? this.opts.value ?? '';
+    }
+    _rebuild() {
+        if (!this._wrapper)
+            return;
+        const group = this._wrapper.querySelector('.jux-radio-options');
+        if (!group)
+            return;
+        group.innerHTML = '';
+        this._inputs = [];
+        this._buildOptions(group);
+    }
+    _buildOptions(container) {
+        for (const opt of this.opts.options || []) {
+            const item = document.createElement('label');
+            item.className = 'jux-radio-item';
+            const inp = document.createElement('input');
+            inp.type = 'radio';
+            inp.name = this.opts.name || this.id;
+            inp.value = opt.value;
+            inp.className = 'jux-radio-input';
+            if (opt.value === this.opts.value)
+                inp.checked = true;
+            if (opt.disabled || this.opts.disabled)
+                inp.disabled = true;
+            if (this.opts.required)
+                inp.required = true;
+            inp.addEventListener('change', (e) => {
+                if (this._onChange)
+                    this._onChange(inp.value, e);
+            });
+            const text = document.createElement('span');
+            text.className = 'jux-radio-label';
+            text.textContent = opt.label;
+            item.appendChild(inp);
+            item.appendChild(text);
+            container.appendChild(item);
+            this._inputs.push(inp);
+        }
+    }
+    render(target) {
+        const wrapper = document.createElement('fieldset');
+        wrapper.className = 'jux-radio-group';
+        wrapper.id = this.id;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        if (this.opts.label) {
+            const legend = document.createElement('legend');
+            legend.textContent = this.opts.label;
+            legend.className = 'jux-radio-group-label';
+            wrapper.appendChild(legend);
+        }
+        const optionsDiv = document.createElement('div');
+        optionsDiv.className = `jux-radio-options jux-radio-${this.opts.direction}`;
+        this._buildOptions(optionsDiv);
+        wrapper.appendChild(optionsDiv);
+        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 radio(id, options = {}) {
+    const r = new RadioGroup(id, options);
+    r.render();
+    return r;
+}
+export { RadioGroup };

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

@@ -0,0 +1,41 @@
+interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface SelectOptions {
+    label?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    multiple?: boolean;
+    class?: string;
+    style?: string;
+}
+declare class Select {
+    id: string;
+    opts: SelectOptions;
+    private _element;
+    private _wrapper;
+    private _onChange;
+    constructor(id: string, options?: SelectOptions);
+    label(value: string): this;
+    placeholder(value: string): this;
+    required(value?: boolean): this;
+    disabled(value?: boolean): this;
+    multiple(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    options(opts: SelectOption[]): this;
+    value(val: string): this;
+    onChange(fn: (value: string, event: Event) => void): this;
+    getValue(): string;
+    getSelectedValues(): string[];
+    private _rebuildOptions;
+    render(target?: string | HTMLElement): this;
+}
+export declare function select(id: string, options?: SelectOptions): Select;
+export { Select, SelectOption, SelectOptions };
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../lib/components/select.ts"],"names":[],"mappings":"AAEA,UAAU,YAAY;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,cAAM,MAAM;IACR,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAwD;gBAE7D,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAMnD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAChC,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,OAAO,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI;IAMnC,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMxB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAKzD,QAAQ,IAAI,MAAM;IAIlB,iBAAiB,IAAI,MAAM,EAAE;IAK7B,OAAO,CAAC,eAAe;IAuBvB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;CAuC9C;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAItE;AAED,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/lib/components/select.js

@@ -0,0 +1,109 @@
+import generateId from '../utils/idgen.js';
+class Select {
+    constructor(id, options = {}) {
+        this._element = null;
+        this._wrapper = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = { options: [], ...options };
+    }
+    // Fluent API
+    label(value) { this.opts.label = value; return this; }
+    placeholder(value) { this.opts.placeholder = value; return this; }
+    required(value = true) { this.opts.required = value; return this; }
+    disabled(value = true) { this.opts.disabled = value; return this; }
+    multiple(value = true) { this.opts.multiple = value; return this; }
+    style(value) { this.opts.style = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    options(opts) {
+        this.opts.options = opts;
+        if (this._element)
+            this._rebuildOptions();
+        return this;
+    }
+    value(val) {
+        this.opts.value = val;
+        if (this._element)
+            this._element.value = val;
+        return this;
+    }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() {
+        return this._element?.value ?? this.opts.value ?? '';
+    }
+    getSelectedValues() {
+        if (!this._element)
+            return [];
+        return Array.from(this._element.selectedOptions).map(o => o.value);
+    }
+    _rebuildOptions() {
+        if (!this._element)
+            return;
+        this._element.innerHTML = '';
+        if (this.opts.placeholder) {
+            const ph = document.createElement('option');
+            ph.value = '';
+            ph.textContent = this.opts.placeholder;
+            ph.disabled = true;
+            ph.selected = !this.opts.value;
+            this._element.appendChild(ph);
+        }
+        for (const opt of this.opts.options || []) {
+            const o = document.createElement('option');
+            o.value = opt.value;
+            o.textContent = opt.label;
+            if (opt.disabled)
+                o.disabled = true;
+            if (opt.value === this.opts.value)
+                o.selected = true;
+            this._element.appendChild(o);
+        }
+    }
+    render(target) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-select';
+        wrapper.id = `${this.id}-wrapper`;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        if (this.opts.label) {
+            const labelEl = document.createElement('label');
+            labelEl.htmlFor = this.id;
+            labelEl.textContent = this.opts.label;
+            labelEl.className = 'jux-select-label';
+            wrapper.appendChild(labelEl);
+        }
+        const sel = document.createElement('select');
+        sel.id = this.id;
+        sel.className = 'jux-select-element';
+        if (this.opts.required)
+            sel.required = true;
+        if (this.opts.disabled)
+            sel.disabled = true;
+        if (this.opts.multiple)
+            sel.multiple = true;
+        this._element = sel;
+        this._rebuildOptions();
+        sel.addEventListener('change', (e) => {
+            if (this._onChange)
+                this._onChange(sel.value, e);
+        });
+        wrapper.appendChild(sel);
+        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 select(id, options = {}) {
+    const s = new Select(id, options);
+    s.render();
+    return s;
+}
+export { Select };

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

@@ -1,23 +1,33 @@
+interface TagOptions {
+    content?: string;
+    class?: string;
+    style?: string;
+    [key: string]: any;
+}
 declare class Tag {
     id: string;
-    content: string;
-    options: Record<string, any>;
     tagName: string;
-    constructor(data: any);
-    modify(): this;
-    render(): HTMLElement;
+    opts: TagOptions;
+    private _element;
+    constructor(id: string, tagName: string, options?: TagOptions);
+    content(value: string): this;
+    class(value: string): this;
+    style(value: string): this;
+    render(target?: string | HTMLElement): this;
+    getElement(): HTMLElement | null;
 }
-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 declare function tag(id: string, tagName: string, options?: TagOptions): Tag;
+export declare function div(id: string, options?: TagOptions): Tag;
+export declare function span(id: string, options?: TagOptions): Tag;
+export declare function p(id: string, options?: TagOptions): Tag;
+export declare function code(id: string, options?: TagOptions): Tag;
+export declare function pre(id: string, options?: TagOptions): Tag;
+export declare function h1(id: string, options?: TagOptions): Tag;
+export declare function h2(id: string, options?: TagOptions): Tag;
+export declare function h3(id: string, options?: TagOptions): Tag;
+export declare function h4(id: string, options?: TagOptions): Tag;
+export declare function h5(id: string, options?: TagOptions): Tag;
+export declare function h6(id: string, options?: TagOptions): Tag;
+export { Tag, TagOptions };
 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;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"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAOjE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;IAuBpC,UAAU,IAAI,WAAW,GAAG,IAAI;CACnC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAIxE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAmC;AACzF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAE3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;AAC3B,eAAe,GAAG,CAAC"}

package/dist/lib/components/tag.js

@@ -1,40 +1,56 @@
 import generateId from '../utils/idgen.js';
 class Tag {
-    constructor(data) {
-        this.id = generateId();
-        this.content = data.content || '';
-        this.options = data.options || {};
-        this.tagName = data.tagName || 'div';
+    constructor(id, tagName, options = {}) {
+        this._element = null;
+        this.id = id || generateId();
+        this.tagName = tagName;
+        this.opts = options;
     }
-    modify() {
-        return this;
-    }
-    render() {
+    // Fluent API
+    content(value) { this.opts.content = value; if (this._element)
+        this._element.textContent = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    style(value) { this.opts.style = value; if (this._element)
+        this._element.setAttribute('style', value); return this; }
+    render(target) {
         const el = document.createElement(this.tagName);
         el.id = this.id;
-        el.textContent = this.content;
-        for (const [key, value] of Object.entries(this.options)) {
+        if (this.opts.content)
+            el.textContent = this.opts.content;
+        if (this.opts.class)
+            el.className = this.opts.class;
+        if (this.opts.style)
+            el.setAttribute('style', this.opts.style);
+        // Apply any extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if (['content', 'class', 'style'].includes(key))
+                continue;
             el.setAttribute(key, String(value));
         }
-        const app = document.getElementById('app');
-        app?.appendChild(el);
-        return el;
+        this._element = el;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(el);
+        return this;
     }
+    getElement() { return this._element; }
 }
-export function tag(data) {
-    const t = new Tag(data);
+export function tag(id, tagName, options = {}) {
+    const t = new Tag(id, tagName, options);
     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(id, options = {}) { return tag(id, 'div', options); }
+export function span(id, options = {}) { return tag(id, 'span', options); }
+export function p(id, options = {}) { return tag(id, 'p', options); }
+export function code(id, options = {}) { return tag(id, 'code', options); }
+export function pre(id, options = {}) { return tag(id, 'pre', options); }
+export function h1(id, options = {}) { return tag(id, 'h1', options); }
+export function h2(id, options = {}) { return tag(id, 'h2', options); }
+export function h3(id, options = {}) { return tag(id, 'h3', options); }
+export function h4(id, options = {}) { return tag(id, 'h4', options); }
+export function h5(id, options = {}) { return tag(id, 'h5', options); }
+export function h6(id, options = {}) { return tag(id, 'h6', options); }
+export { Tag };
 export default tag;

package/dist/lib/index.d.ts

@@ -1,6 +1,9 @@
 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";
+import { select } from "./components/select.js";
+import { radio } from "./components/radio.js";
+import { checkbox, checkboxGroup } from "./components/checkbox.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -15,5 +18,9 @@ export declare const jux: {
     pre: typeof pre;
     include: typeof include;
     input: typeof input;
+    select: typeof select;
+    radio: typeof radio;
+    checkbox: typeof checkbox;
+    checkboxGroup: typeof checkboxGroup;
 };
 //# 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,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,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;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEnE,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;CAaf,CAAA"}

package/dist/lib/index.js

@@ -1,6 +1,9 @@
 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";
+import { select } from "./components/select.js";
+import { radio } from "./components/radio.js";
+import { checkbox, checkboxGroup } from "./components/checkbox.js";
 export const jux = {
     tag,
     div,
@@ -9,5 +12,9 @@ export const jux = {
     span,
     pre,
     include,
-    input
+    input,
+    select,
+    radio,
+    checkbox,
+    checkboxGroup
 };

package/package.json

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