@esportsplus/ui 0.46.0 → 0.47.2

package/build/components/button/index.d.ts

@@ -1,23 +1,24 @@
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import { Renderable } from '@esportsplus/template';
 import './scss/index.scss';
 declare const hold: {
     (): ReturnType<(this: {
-        attributes?: import("@esportsplus/template").Attributes | undefined;
+        attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
-    <T extends import("@esportsplus/template").Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: import("@esportsplus/template").Attributes | undefined;
+    <T extends template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
@@ -25,25 +26,25 @@ declare const hold: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: import("@esportsplus/template").Attributes | undefined;
+        attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
-    (attributes: import("@esportsplus/template").Attributes, content: (state: {
+    (attributes: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>): ReturnType<(this: {
-        attributes?: import("@esportsplus/template").Attributes | undefined;
+        attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
@@ -51,22 +52,22 @@ declare const hold: {
 declare const _default: {
     hold: {
         (): ReturnType<(this: {
-            attributes?: import("@esportsplus/template").Attributes | undefined;
+            attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;
-        <T extends import("@esportsplus/template").Attributes>(attributes: T): ReturnType<(this: {
-            attributes?: import("@esportsplus/template").Attributes | undefined;
+        <T extends template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>(attributes: T): ReturnType<(this: {
+            attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;
@@ -74,25 +75,25 @@ declare const _default: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>>(content: T): ReturnType<(this: {
-            attributes?: import("@esportsplus/template").Attributes | undefined;
+            attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;
-        (attributes: import("@esportsplus/template").Attributes, content: (state: {
+        (attributes: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>): ReturnType<(this: {
-            attributes?: import("@esportsplus/template").Attributes | undefined;
+            attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;

package/build/components/button/index.js

@@ -1,37 +1,62 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import template from '../template/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c5000y = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div
+ class='button '><!--$--></div>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c5000w extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #complete = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #holding = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get complete() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#complete);
+    }
+    set complete(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#complete, _v0);
+    }
+    get holding() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#holding);
+    }
+    set holding(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#holding, _v1);
+    }
+}
 const hold = template.factory(function (attributes, content) {
     let end = () => {
         if (!state.complete) {
             state.holding = false;
         }
-    }, start = (e) => {
-        e.preventDefault();
-        state.holding = true;
-    }, state = reactive({
-        complete: false,
-        holding: false
-    });
-    return html `
-            <div
-                class='button ${() => state.holding && 'button--holding'} ${() => state.complete && '--active'}'
-                onanimationend=${(e) => {
-        if (e.animationName === 'buttonHolding') {
-            state.complete = true;
-        }
-    }}
-                onclick=${() => { }}
-                onmousedown=${start}
-                onmouseup=${end}
-                ontouchstart=${start}
-                ontouchend=${end}
-                ${attributes}
-            >
-                ${() => content(state)}
-            </div>
-        `;
+    }, state = new ReactiveObject_a6aeaec5a75649bd8ec693d5230c5000w();
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c5000x = template_a6aeaec5a75649bd8ec693d5230c5000y(), element_a6aeaec5a75649bd8ec693d5230c5000z = root_a6aeaec5a75649bd8ec693d5230c5000x.firstChild, element_a6aeaec5a75649bd8ec693d5230c500010 = element_a6aeaec5a75649bd8ec693d5230c5000z.firstChild;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c5000z, ' ', () => state.holding && 'button--holding');
+        template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c5000z, ' ', () => state.complete && '--active');
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000z, 'mousedown', (e) => {
+            e.preventDefault();
+            state.holding = true;
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c5000z, attributes);
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000z, 'animationend', (e) => {
+            if (e.animationName === 'buttonHolding') {
+                state.complete = true;
+            }
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000z, 'click', () => { });
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000z, 'mousedown', (e) => {
+            e.preventDefault();
+            state.holding = true;
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000z, 'mouseup', end);
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000z, 'touchend', end);
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000z, 'touchstart', (e) => {
+            e.preventDefault();
+            state.holding = true;
+        });
+        new template_a6aeaec5a75649bd8ec693d5230c50001.EffectSlot(element_a6aeaec5a75649bd8ec693d5230c500010, () => content(state));
+        return root_a6aeaec5a75649bd8ec693d5230c5000x;
+    })();
 });
 export default { hold };
 export { hold };

package/build/components/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import { type Attributes } from '@esportsplus/template';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 declare const factory: (type: string) => (this: {
     attributes?: Attributes;
@@ -7,7 +7,7 @@ declare const factory: (type: string) => (this: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 declare const _default: (this: {
     attributes?: Attributes;
 } | any, attributes?: Attributes & {
@@ -15,6 +15,6 @@ declare const _default: (this: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 export default _default;
 export { factory };

package/build/components/checkbox/index.js

@@ -1,38 +1,52 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import { root } from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c500013 = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div><input></div>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c500011 extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #error = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#error, _v1);
+    }
+}
 const OMIT = ['checked', 'value'];
 const factory = (type) => {
     function template(attributes) {
-        let state = attributes?.state || reactive({
-            active: false,
-            error: ''
-        });
+        let state = attributes?.state || new ReactiveObject_a6aeaec5a75649bd8ec693d5230c500011();
         if (attributes?.checked) {
             state.active = true;
         }
-        return html `
-            <div
-                class='${type} ${() => state.active && '--active'}'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${attributes && omit(attributes, OMIT)}
-            >
-                <input
-                    ${{
-            checked: attributes?.checked || root(() => state.active),
-            class: `${type}-tag`,
-            onchange: (e) => {
+        return (() => {
+            let root_a6aeaec5a75649bd8ec693d5230c500012 = template_a6aeaec5a75649bd8ec693d5230c500013(), element_a6aeaec5a75649bd8ec693d5230c500014 = root_a6aeaec5a75649bd8ec693d5230c500012.firstChild, element_a6aeaec5a75649bd8ec693d5230c500015 = element_a6aeaec5a75649bd8ec693d5230c500014.firstElementChild;
+            template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c500014, ' ', type);
+            template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c500014, ' ', () => state.active && '--active');
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500014, this?.attributes && omit(this.attributes, OMIT));
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c500014, attributes && omit(attributes, OMIT));
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c500015, 'checked', attributes?.checked || root(() => state.active));
+            template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c500015, '', `${type}-tag`);
+            template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c500015, 'change', (e) => {
                 state.active = e.target.checked;
-            },
-            onrender: form.input.onrender(state),
-            type: type === 'radio' ? 'radio' : 'checkbox',
-            value: attributes?.value || 1
-        }}
-                >
-            </div>
-        `;
+            });
+            template_a6aeaec5a75649bd8ec693d5230c50001.onrender(element_a6aeaec5a75649bd8ec693d5230c500015, form.input.onrender(state));
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c500015, 'type', type === 'radio' ? 'radio' : 'checkbox');
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c500015, 'value', attributes?.value || 1);
+            return root_a6aeaec5a75649bd8ec693d5230c500012;
+        })();
     }
     return template;
 };