@esportsplus/ui 0.46.0 → 0.48.0

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

@@ -1,23 +1,24 @@
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 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_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.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_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.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_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
-    (attributes: import("@esportsplus/template").Attributes, content: (state: {
+    (attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>): ReturnType<(this: {
-        attributes?: import("@esportsplus/template").Attributes | undefined;
+        attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+    }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.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_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.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_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
+            attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.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_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;
-        (attributes: import("@esportsplus/template").Attributes, content: (state: {
+        (attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>): ReturnType<(this: {
-            attributes?: import("@esportsplus/template").Attributes | undefined;
+            attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
+        }, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;

package/build/components/button/index.js

@@ -1,37 +1,46 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import template from '../template/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdfv = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
+ class='button '><!--$--></div>`);
 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>
-        `;
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdfu = template_ed8f776bb07a460eadcbcfe445975fdfv(), element_ed8f776bb07a460eadcbcfe445975fdfw = root_ed8f776bb07a460eadcbcfe445975fdfu.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfx = element_ed8f776bb07a460eadcbcfe445975fdfw.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdfw, ' ', () => state.holding && 'button--holding');
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdfw, ' ', () => state.complete && '--active');
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'mousedown', (e) => {
+            e.preventDefault();
+            state.holding = true;
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfw, attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'animationend', (e) => {
+            if (e.animationName === 'buttonHolding') {
+                state.complete = true;
+            }
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'click', () => { });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'mousedown', (e) => {
+            e.preventDefault();
+            state.holding = true;
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'mouseup', end);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'touchend', end);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'touchstart', (e) => {
+            e.preventDefault();
+            state.holding = true;
+        });
+        new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdfx, () => content(state));
+        return root_ed8f776bb07a460eadcbcfe445975fdfu;
+    })();
 });
 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,8 +1,9 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive, root } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdfz = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div><input></div>`);
 const OMIT = ['checked', 'value'];
 const factory = (type) => {
     function template(attributes) {
@@ -13,26 +14,22 @@ const factory = (type) => {
         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_ed8f776bb07a460eadcbcfe445975fdfy = template_ed8f776bb07a460eadcbcfe445975fdfz(), element_ed8f776bb07a460eadcbcfe445975fdf10 = root_ed8f776bb07a460eadcbcfe445975fdfy.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf11 = element_ed8f776bb07a460eadcbcfe445975fdf10.firstElementChild;
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf10, ' ', type);
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf10, ' ', () => state.active && '--active');
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf10, this?.attributes && omit(this.attributes, OMIT));
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf10, attributes && omit(attributes, OMIT));
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf11, 'checked', attributes?.checked || root(() => state.active));
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf11, '', `${type}-tag`);
+            template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf11, 'change', (e) => {
                 state.active = e.target.checked;
-            },
-            onrender: form.input.onrender(state),
-            type: type === 'radio' ? 'radio' : 'checkbox',
-            value: attributes?.value || 1
-        }}
-                >
-            </div>
-        `;
+            });
+            template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf11, form.input.onrender(state));
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf11, 'type', type === 'radio' ? 'radio' : 'checkbox');
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf11, 'value', attributes?.value || 1);
+            return root_ed8f776bb07a460eadcbcfe445975fdfy;
+        })();
     }
     return template;
 };