@esportsplus/ui 0.0.87 → 0.0.89

package/build/components/form/action.js

@@ -1,7 +1,11 @@
-import { response } from '@esportsplus/action';
-import { html } from '@esportsplus/template';
-import alert from '../../components/alert';
-import input from './input';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const action_1 = require("@esportsplus/action");
+const alert_1 = __importDefault(require("../../components/alert"));
+const input_1 = __importDefault(require("./input"));
 function parse(input) {
     let data = {};
     for (let path in input) {
@@ -14,33 +18,34 @@ function parse(input) {
     return data;
 }
 ;
-export default function (action) {
-    return html `
-        onclick='${function (event) {
-        let trigger = event.target;
-        if (trigger?.type !== 'submit') {
-            return;
-        }
-        event.preventDefault();
-        this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
-    }}'
-        onsubmit='${async function (event) {
-        event.preventDefault();
-        event?.submitter?.classList.add('button--processing');
-        let { errors } = await action({
-            alert,
-            input: parse(Object.fromEntries(new FormData(this)?.entries())),
-            response
-        });
-        for (let i = 0, n = errors.length; i < n; i++) {
-            let { message, path } = errors[i], state = input.get(this[path]);
-            if (!state) {
-                continue;
+function default_1(action) {
+    return {
+        onclick: function (event) {
+            let trigger = event.target;
+            if (trigger?.type !== 'submit') {
+                return;
+            }
+            event.preventDefault();
+            this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
+        },
+        onsubmit: async function (event) {
+            event.preventDefault();
+            event?.submitter?.classList.add('button--processing');
+            let { errors } = await action({
+                alert: alert_1.default,
+                input: parse(Object.fromEntries(new FormData(this)?.entries())),
+                response: action_1.response
+            });
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i], state = input_1.default.get(this[path]);
+                if (!state) {
+                    continue;
+                }
+                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
             }
-            state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+            event?.submitter?.classList.remove('button--processing');
         }
-        event?.submitter?.classList.remove('button--processing');
-    }}'
-    `;
+    };
 }
+exports.default = default_1;
 ;

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

@@ -22,6 +22,6 @@ declare const _default: {
         subtitle?: string | undefined;
         suptitle?: string | undefined;
         title?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Template;
+    }) => import("@esportsplus/template/build/types").Renderable;
 };
 export default _default;

package/build/components/form/index.js

@@ -1,4 +1,9 @@
-import action from './action';
-import input from './input';
-import layout from './layout';
-export default { action, input, layout };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const action_1 = __importDefault(require("./action"));
+const input_1 = __importDefault(require("./input"));
+const layout_1 = __importDefault(require("./layout"));
+exports.default = { action: action_1.default, input: input_1.default, layout: layout_1.default };

package/build/components/form/input.js

@@ -1,3 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 let cache = new WeakMap();
 const attributes = (reactive) => {
     return (element) => {
@@ -7,4 +9,4 @@ const attributes = (reactive) => {
 const get = (element) => {
     return element ? cache.get(element) : undefined;
 };
-export default { attributes, get };
+exports.default = { attributes, get };

package/build/components/form/layout.d.ts

@@ -9,5 +9,5 @@ type Data = {
     class?: string;
     content?: any;
 } & Parameters<typeof header>[0];
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").Template;
+declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
 export default _default;

package/build/components/form/layout.js

@@ -1,12 +1,14 @@
-import { html } from '@esportsplus/template';
-import { header } from '../../components/page';
-export default (data) => html `
-    ${header(data)}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+const page_1 = require("../../components/page");
+exports.default = (data) => (0, template_1.html) `
+    ${(0, page_1.header)(data)}
 
     <form class='${data?.class}' ${data?.action || ''}>
         ${data?.content || ''}
 
-        ${data?.button?.content ? html `
+        ${data?.button?.content ? (0, template_1.html) `
             <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
                 ${data?.button?.content || ''}
             </button>

package/build/components/form/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/components/index.js

@@ -1,9 +1,24 @@
-export { default as alert } from './alert';
-export { default as field } from './field';
-export { default as form } from './form';
-export { default as overlay } from './overlay';
-export { default as page } from './page';
-export { default as root } from './root';
-export { default as scrollbar } from './scrollbar';
-export { default as site } from './site';
-export { default as tooltip } from './tooltip';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltip = exports.site = exports.scrollbar = exports.root = exports.page = exports.overlay = exports.form = exports.field = exports.alert = void 0;
+var alert_1 = require("./alert");
+Object.defineProperty(exports, "alert", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
+var field_1 = require("./field");
+Object.defineProperty(exports, "field", { enumerable: true, get: function () { return __importDefault(field_1).default; } });
+var form_1 = require("./form");
+Object.defineProperty(exports, "form", { enumerable: true, get: function () { return __importDefault(form_1).default; } });
+var overlay_1 = require("./overlay");
+Object.defineProperty(exports, "overlay", { enumerable: true, get: function () { return __importDefault(overlay_1).default; } });
+var page_1 = require("./page");
+Object.defineProperty(exports, "page", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
+var root_1 = require("./root");
+Object.defineProperty(exports, "root", { enumerable: true, get: function () { return __importDefault(root_1).default; } });
+var scrollbar_1 = require("./scrollbar");
+Object.defineProperty(exports, "scrollbar", { enumerable: true, get: function () { return __importDefault(scrollbar_1).default; } });
+var site_1 = require("./site");
+Object.defineProperty(exports, "site", { enumerable: true, get: function () { return __importDefault(site_1).default; } });
+var tooltip_1 = require("./tooltip");
+Object.defineProperty(exports, "tooltip", { enumerable: true, get: function () { return __importDefault(tooltip_1).default; } });

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

@@ -2,5 +2,5 @@ type Data = {
     class?: string;
     content?: any;
 };
-declare const _default: (data?: Data) => import("@esportsplus/template/build/types").Template;
+declare const _default: (data?: Data) => import("@esportsplus/template/build/types").Renderable;
 export default _default;

package/build/components/overlay/index.js

@@ -1,5 +1,7 @@
-import { html } from '@esportsplus/template';
-export default (data = {}) => html `
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+exports.default = (data = {}) => (0, template_1.html) `
     <section class='overlay ${data?.class || ''}'>
         ${data?.content || ''}
     </section>

package/build/components/page/header.d.ts

@@ -2,5 +2,5 @@ declare const _default: (data: {
     subtitle?: string;
     suptitle?: string;
     title?: string;
-}) => import("@esportsplus/template/build/types").Template;
+}) => import("@esportsplus/template/build/types").Renderable;
 export default _default;

package/build/components/page/header.js

@@ -1,18 +1,20 @@
-import { html } from '@esportsplus/template';
-export default (data) => html `
-    ${data?.suptitle ? html `
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+exports.default = (data) => (0, template_1.html) `
+    ${data?.suptitle ? (0, template_1.html) `
         <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
             ${data?.suptitle}
         </span>
     ` : ''}
 
-    ${data?.title ? html `
+    ${data?.title ? (0, template_1.html) `
         <h1 class="page-title --line-height-200 --margin-300 ${!data?.subtitle && '--text-crop-bottom'} ${data?.suptitle ? '--margin-top' : '--text-crop-top'}">
             ${data?.title}
         </h1>
     ` : ''}
 
-    ${data?.subtitle ? html `
+    ${data?.subtitle ? (0, template_1.html) `
         <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
             ${data?.subtitle}
         </span>

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

@@ -5,11 +5,11 @@ declare const _default: {
         subtitle?: string | undefined;
         suptitle?: string | undefined;
         title?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Template;
+    }) => import("@esportsplus/template/build/types").Renderable;
     layout: (data?: {
         class?: string | undefined;
         content?: any;
-    }) => import("@esportsplus/template/build/types").Template;
+    }) => import("@esportsplus/template/build/types").Renderable;
 };
 export default _default;
 export { header, layout };

package/build/components/page/index.js

@@ -1,4 +1,11 @@
-import header from './header';
-import layout from './layout';
-export default { header, layout };
-export { header, layout };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layout = exports.header = void 0;
+const header_1 = __importDefault(require("./header"));
+exports.header = header_1.default;
+const layout_1 = __importDefault(require("./layout"));
+exports.layout = layout_1.default;
+exports.default = { header: header_1.default, layout: layout_1.default };

package/build/components/page/layout.d.ts

@@ -1,5 +1,5 @@
 declare const _default: (data?: {
     class?: string;
     content?: any;
-}) => import("@esportsplus/template/build/types").Template;
+}) => import("@esportsplus/template/build/types").Renderable;
 export default _default;

package/build/components/page/layout.js

@@ -1,5 +1,7 @@
-import { html } from '@esportsplus/template';
-export default (data = {}) => html `
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+exports.default = (data = {}) => (0, template_1.html) `
     <section class='page ${data?.class}'>
         ${data?.content}
     </section>

package/build/components/root/index.js

@@ -1,3 +1,9 @@
-import queue from './queue';
-export default { queue };
-export { queue };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.queue = void 0;
+const queue_1 = __importDefault(require("./queue"));
+exports.queue = queue_1.default;
+exports.default = { queue: queue_1.default };

package/build/components/root/queue.js

@@ -1,18 +1,10 @@
-import events from '@esportsplus/delegated-events';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 let initialized = false, queue = [];
 const onclick = (fn) => {
     if (!initialized) {
-        events.register(document.body, 'click', async () => {
-            if (!queue.length) {
-                return;
-            }
-            let items = queue.splice(0);
-            for (let i = 0, n = items.length; i < n; i++) {
-                await items[i]();
-            }
-        });
         initialized = true;
     }
     queue.push(fn);
 };
-export default { onclick };
+exports.default = { onclick };

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

@@ -2,7 +2,10 @@ declare const _default: ({ fixed, style }?: {
     fixed?: boolean | undefined;
     style?: string | undefined;
 }) => {
-    attributes: import("@esportsplus/template/build/types").Template;
-    html: import("@esportsplus/template/build/types").Template;
+    attributes: {
+        class: () => string;
+        onscroll: (this: HTMLElement) => void;
+    };
+    html: import("@esportsplus/template/build/types").Renderable;
 };
 export default _default;

package/build/components/scrollbar/index.js

@@ -1,28 +1,30 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const reactivity_1 = require("@esportsplus/reactivity");
+const template_1 = require("@esportsplus/template");
 let root = document.body, width;
-export default ({ fixed, style } = {}) => {
-    let state = reactive({
+exports.default = ({ fixed, style } = {}) => {
+    let state = (0, reactivity_1.reactive)({
         height: 100,
         translate: 0
     });
     return {
-        attributes: html `
-            class='${() => {
-            return '--scrollbar';
-        }}'
-            onscroll='${function () {
-            if (width === undefined) {
-                width = this.offsetWidth - this.clientWidth;
-                if (width && width !== 17) {
-                    root.style.setProperty('--scrollbar-width', `${width}px`);
+        attributes: {
+            class: () => {
+                return '--scrollbar';
+            },
+            onscroll: function () {
+                if (width === undefined) {
+                    width = this.offsetWidth - this.clientWidth;
+                    if (width && width !== 17) {
+                        root.style.setProperty('--scrollbar-width', `${width}px`);
+                    }
                 }
+                state.height = (this.clientHeight / this.scrollHeight) * 100;
+                state.translate = (this.scrollTop / this.clientHeight) * 100;
             }
-            state.height = (this.clientHeight / this.scrollHeight) * 100;
-            state.translate = (this.scrollTop / this.clientHeight) * 100;
-        }}'
-        `,
-        html: html `
+        },
+        html: (0, template_1.html) `
             <div
                 class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
                 style='${() => `

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

@@ -5,5 +5,5 @@ type Data = {
         style?: string;
     };
 };
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").Template;
+declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
 export default _default;

package/build/components/site/index.js

@@ -1,12 +1,14 @@
-import { html } from '@esportsplus/template';
-import { scrollbar } from '../../components';
-export default (data) => {
-    let { attributes: a, html: h } = scrollbar({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+const components_1 = require("../../components");
+exports.default = (data) => {
+    let { attributes: a, html: h } = (0, components_1.scrollbar)({
         fixed: true,
         style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
     });
-    return html `
-        <section class='site ${data?.class || ''}' ${a}>
+    return (0, template_1.html) `
+        <section class='site ${data?.class || ''}' ...${a}>
             ${data?.content || ''}
             ${h}
         </section>

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

@@ -23,8 +23,11 @@ declare const _default: {
         } | undefined;
         toggle?: boolean | undefined;
     }) => {
-        attributes: import("@esportsplus/template/build/types").Template;
-        content: (() => "" | import("@esportsplus/template/build/types").Template) | undefined;
+        attributes: {
+            class: () => string;
+            onclick: (this: HTMLElement, e: Event) => void;
+        };
+        content: (() => "" | import("@esportsplus/template/build/types").Renderable) | undefined;
         state: {
             active: boolean;
             render: boolean | undefined;
@@ -36,7 +39,11 @@ declare const _default: {
         };
     };
     onhover: (active?: boolean) => {
-        attributes: import("@esportsplus/template/build/types").Template;
+        attributes: {
+            class: () => string;
+            onmouseover: () => void;
+            onmouseout: () => void;
+        };
         state: {
             active: boolean;
             render: boolean | undefined;

package/build/components/tooltip/index.js

@@ -1,7 +1,11 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { root } from '../../components';
-import menu from './menu';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const reactivity_1 = require("@esportsplus/reactivity");
+const components_1 = require("../../components");
+const menu_1 = __importDefault(require("./menu"));
 let queue = [], running = false, scheduled = false;
 async function frame() {
     if (running) {
@@ -15,59 +19,59 @@ async function frame() {
     running = false;
 }
 const onclick = (data = {}) => {
-    let content, state = reactive({
+    let content, state = (0, reactivity_1.reactive)({
         active: data.active || false,
         render: undefined
     });
     if (data.menu) {
-        content = menu(data.menu, state);
+        content = (0, menu_1.default)(data.menu, state);
     }
     return {
-        attributes: html `
-            class='${() => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        }}'
-            onclick='${function (e) {
-            let active = true, node = e.target;
-            if (data.toggle && (this.contains(node) || this.isSameNode(node))) {
-                active = !state.active;
-            }
-            frame();
-            state.active = active;
-            if (active) {
-                queue.push(() => state.active = false);
+        attributes: {
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onclick: function (e) {
+                let active = true, node = e.target;
+                if (data.toggle && (this.contains(node) || this.isSameNode(node))) {
+                    active = !state.active;
+                }
+                frame();
+                state.active = active;
+                if (active) {
+                    queue.push(() => state.active = false);
+                }
+                if (!scheduled) {
+                    scheduled = true;
+                    components_1.root.queue.onclick(() => {
+                        frame();
+                        scheduled = false;
+                    });
+                }
             }
-            if (!scheduled) {
-                scheduled = true;
-                root.queue.onclick(() => {
-                    frame();
-                    scheduled = false;
-                });
-            }
-        }}'
-        `,
+        },
         content,
         state
     };
 };
 const onhover = (active = false) => {
-    let state = reactive({
+    let state = (0, reactivity_1.reactive)({
         active,
         render: undefined
     });
     return {
-        attributes: html `
-            class='${() => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        }}'
-            onmouseover='${() => {
-            state.active = true;
-        }}'
-            onmouseout='${() => {
-            state.active = false;
-        }}'
-        `,
+        attributes: {
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onmouseover: () => {
+                state.active = true;
+            },
+            onmouseout: () => {
+                state.active = false;
+            }
+        },
         state
     };
 };
-export default { onclick, onhover };
+exports.default = { onclick, onhover };

package/build/components/tooltip/menu.d.ts

@@ -21,5 +21,5 @@ type Data = {
 declare const _default: (data: Data, state: {
     active?: boolean;
     render?: boolean;
-}) => () => "" | import("@esportsplus/template/build/types").Template;
+}) => () => "" | import("@esportsplus/template/build/types").Renderable;
 export default _default;

package/build/components/tooltip/menu.js

@@ -1,10 +1,12 @@
-import { effect } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const reactivity_1 = require("@esportsplus/reactivity");
+const template_1 = require("@esportsplus/template");
 function template(data) {
-    return html `
+    return (0, template_1.html) `
         <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-            ${(data?.items || []).map(item => html `
-                ${item?.border ? html `
+            ${(data?.items || []).map(item => (0, template_1.html) `
+                ${item?.border ? (0, template_1.html) `
                     <div
                         class="border ${item?.border?.class || ''}"
                         style='
@@ -15,11 +17,11 @@ function template(data) {
                 ` : ''}
 
                 <${item?.url ? 'a' : 'div'}
-                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? html `onclick='${item.onclick}'` : ''}
+                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? (0, template_1.html) `onclick='${item.onclick}'` : ''}
                     style='${item?.style || ''}'
                     ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
                 >
-                    ${item?.svg ? html `
+                    ${item?.svg ? (0, template_1.html) `
                         <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
                             ${item.svg}
                         </div>
@@ -33,8 +35,8 @@ function template(data) {
         </div>
     `;
 }
-export default (data, state) => {
-    effect(() => {
+exports.default = (data, state) => {
+    (0, reactivity_1.effect)(() => {
         if (!state.active || state.render) {
             return;
         }

package/build/index.d.ts

@@ -1,2 +1 @@
-import './types';
 export * from './components';