@esportsplus/ui 0.18.0 → 0.19.0

package/src/components/field/title.ts

@@ -4,14 +4,24 @@ import tooltip from '~/components/tooltip';
 import template from '~/components/template';
 
 
+const OMIT = ['required'];
+
+
 export default template.factory<Attributes & { required?: boolean }>(
-    (attributes, content) => html`
-        <div class='field-title --flex-horizontal-space-between --flex-vertical' ${omit(attributes, ['required'])}>
-            ${content}
+    (attributes, content) =>{
+        let required = attributes?.required;
+
+        return html`
+            <div
+                class='field-title --flex-horizontal-space-between --flex-vertical'
+                ${omit(attributes, OMIT)}
+            >
+                ${content}
 
-            ${attributes.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html`
-                <span class='tooltip-message tooltip-message--w'>Required</span>
-            `)}
-        </div>
-    `
+                ${required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html`
+                    <span class='tooltip-message tooltip-message--w'>Required</span>
+                `)}
+            </div>
+        `;
+    }
 );

package/src/components/form/action.ts

@@ -1,8 +1,25 @@
-import response from '@esportsplus/action';
-import { Action } from './types';
+import response, { Response } from '@esportsplus/action';
+import { html, Attributes, Element } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '~/components/template';
 import input from './input';
 
 
+type A = Attributes & { action: Action, state?: { processing: boolean } };
+
+type Action = (data: Payload) => Promise<Errors> | Errors;
+
+type Errors = { errors: Response<unknown>['errors'] };
+
+type Payload = {
+    input: Record<string, any>;
+    response: typeof response;
+};
+
+
+const OMIT = ['action', 'state'];
+
+
 function parse(input: ReturnType<FormData['entries']>) {
     let data: Record<string, any> = {};
 
@@ -33,48 +50,59 @@ function parse(input: ReturnType<FormData['entries']>) {
 };
 
 
-export default function(action: Action, s?: { processing: boolean }) {
-    return {
-        onclick: function(this: HTMLFormElement, event: Event) {
-            let trigger = event.target as HTMLButtonElement;
-
-            if (trigger?.type !== 'submit') {
-                return;
-            }
-
-            // On initial page load both events will be dispatched without preventDefault
-            event.preventDefault();
-
-            this.dispatchEvent(
-                new SubmitEvent('submit', { cancelable: true, bubbles:true, submitter: trigger })
-            );
-        },
-        onsubmit: async function(this: HTMLFormElement, event: SubmitEvent) {
-            event.preventDefault();
-
-            if (s) {
-                s.processing = true;
-            }
-
-            let { errors } = await action({
-                    input: parse( new FormData( this ).entries() ),
-                    response
-                });
-
-            for (let i = 0, n = errors.length; i < n; i++) {
-                let { message, path } = errors[i],
-                    reactive = input.get( this[path!] );
-
-                if (!reactive) {
-                    continue;
-                }
-
-                reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
-            }
-
-            if (s) {
-                s.processing = false;
-            }
-        }
-    };
-};
+export default template.factory<A>(
+    (attributes, content) => {
+        let { action, state } = attributes;
+
+        return html`
+            <form
+                ${omit(attributes, OMIT)}
+                ${{
+                    onclick: function(event) {
+                        let trigger = event.target as HTMLButtonElement;
+
+                        if (trigger?.type !== 'submit') {
+                            return;
+                        }
+
+                        // On initial page load both events will be dispatched without preventDefault
+                        event.preventDefault();
+
+                        this.dispatchEvent(
+                            new SubmitEvent('submit', { cancelable: true, bubbles:true, submitter: trigger })
+                        );
+                    },
+                    onsubmit: async function(event) {
+                        event.preventDefault();
+
+                        if (state) {
+                            state.processing = true;
+                        }
+
+                        let { errors } = await action({
+                                input: parse( new FormData( this as any as HTMLFormElement ).entries() ),
+                                response
+                            });
+
+                        for (let i = 0, n = errors.length; i < n; i++) {
+                            let { message, path } = errors[i],
+                                reactive = input.get( (this as any as HTMLFormElement)[path!] as Element | undefined );
+
+                            if (!reactive) {
+                                continue;
+                            }
+
+                            reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+                        }
+
+                        if (state) {
+                            state.processing = false;
+                        }
+                    }
+                }}
+            >
+                ${content}
+            </form>
+        `;
+    }
+);

package/src/components/frame/index.ts

@@ -1,14 +1,9 @@
-import { toArray } from '@esportsplus/utilities';
 import scrollbar from '~/components/scrollbar';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default template.factory<Parameters<typeof scrollbar>[0]>(
-    (attributes, content) => {
-        attributes.class = toArray(attributes.class);
-        attributes.class.push('frame');
-
-        return scrollbar(attributes, content);
+export default scrollbar.bind({
+    attributes: {
+        class: 'frame'
     }
-);
+});

package/src/components/highlight/index.ts

@@ -1,53 +1,67 @@
 import { reactive } from '@esportsplus/reactivity'
-import { Element } from '@esportsplus/template';
+import { html, Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
+type A = Attributes & { background?: string };
+
+
+const OMIT = ['background'];
+
+
 let key = Symbol(),
     observer: IntersectionObserver | null = null;
 
 
-export default (background: string) => {
-    if (observer === null) {
-        observer = new IntersectionObserver((entries) => {
-            let disconnected = 0,
-                n = entries.length;
+export default template.factory(
+    (attributes: A, content) => {
+        if (observer === null) {
+            observer = new IntersectionObserver((entries) => {
+                let disconnected = 0,
+                    n = entries.length;
 
-            for (let i = 0; i < n; i++) {
-                let { isIntersecting, target } = entries[i];
+                for (let i = 0; i < n; i++) {
+                    let { isIntersecting, target } = entries[i];
 
-                if (target.isConnected) {
-                    // @ts-ignore
-                    target[key].highlight = +isIntersecting;
+                    if (target.isConnected) {
+                        // @ts-ignore
+                        target[key].highlight = +isIntersecting;
+                    }
+                    else {
+                        disconnected++;
+                        observer!.unobserve(target);
+                    }
                 }
-                else {
-                    disconnected++;
-                    observer!.unobserve(target);
+
+                if (n - disconnected === 0) {
+                    observer!.disconnect();
+                    observer = null;
                 }
-            }
+            }, { threshold: 1 });
+        }
 
-            if (n - disconnected === 0) {
-                observer!.disconnect();
-                observer = null;
-            }
-        }, { threshold: 1 });
-    }
+        let state = reactive({
+                highlight: 0
+            });
 
-    let state = reactive({
-            highlight: 0
-        });
-
-    return {
-        attributes: {
-            class: 'highlight',
-            onrender: function(element: Element) {
-                element[key] = state;
-                observer!.observe(element);
-            },
-            style: [
-                () => `--highlight: ${state.highlight}`,
-                `--background: ${background}`,
-            ]
-        }
-    };
-}
+        return html`
+            <div class='highlight'
+                ${omit(attributes, OMIT)}
+                ${{
+                    onrender: (element) => {
+                        element[key] = state;
+                        observer!.observe(element);
+                    },
+                    style: [
+                        () => `--highlight: ${state.highlight}`,
+                        `--background: ${attributes.background}`,
+                    ]
+                }}
+            >
+                ${content}
+            </div>
+        `;
+    }
+);

package/src/components/icon/index.ts

@@ -1,10 +1,10 @@
-import { html, Attributes, svg } from '@esportsplus/template';
+import { html, svg } from '@esportsplus/template';
 import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default template.factory<Attributes, Parameters<typeof svg.sprite>[0]>(
-    (attributes, icon) => {
+export default template.factory(
+    (attributes, icon: Parameters<typeof svg.sprite>[0]) => {
         return html`
             <div class='icon' ${attributes}>
                 ${svg.sprite(icon)}

package/src/components/index.ts

@@ -10,7 +10,6 @@ export * as container from './container';
 export { default as counter } from './counter';
 export { default as ellipsis } from './ellipsis';
 export { default as field } from './field';
-export { default as footer } from './footer';
 export { default as form } from './form';
 export * as frame from './frame';
 export * as grid from './grid';
@@ -24,12 +23,13 @@ export { default as loading } from './loading';
 export * as modal from './modal';
 export { default as number } from './number';
 export { default as overlay } from './overlay';
-export { default as page } from './page';
+export * from './page';
 export { default as root } from './root';
 export * as row from './row';
 export { default as scrollbar } from './scrollbar';
 export { default as sidebar } from './sidebar';
 export { default as site } from './site';
+export { default as template } from './template';
 export * as text from './text';
 export * as thumbnail from './thumbnail';
 export { default as tooltip } from './tooltip';

package/src/components/loader/index.ts

@@ -1,12 +1,13 @@
-import { html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default template.factory<Attributes>(
+export default template.factory(
     (attributes, content) => {
-        let state = reactive({
+        let c = () => state.load && 'loader--load',
+            state = reactive({
                 load: false,
                 scale: false
             });
@@ -16,24 +17,21 @@ export default template.factory<Attributes>(
         }, 300);
 
         return html`
-            <div class='loader ${() => state.load && 'loader--load'}'>
-                <div class='loader ${() => state.load && 'loader--load'}'>
+            <div class='loader' ${{ class: c }}>
+                <div class='loader' ${{ class: c }}>
                     <div class='loader-content'>
                         <div
-                            class='
-                                ${() => state.scale && 'loader-logo--scale'}
-                                loader-logo
-                                text
-                                --flex-center
-                                --text-uppercase --text-600
-                            '
+                            class='loader-logo text --flex-center --text-uppercase --text-600'
                             style='color: var(--color-grey-500);'
-                            onanimationend='${({ animationName: name }: AnimationEvent) => {
-                                if (name === 'scale') {
-                                    state.load = true;
-                                }
-                            }}'
                             ${attributes}
+                            ${{
+                                class: () => state.scale && 'loader-logo--scale',
+                                onanimationend: ({ animationName: name }) => {
+                                    if (name === 'scale') {
+                                        state.load = true;
+                                    }
+                                }
+                            }}
                         >
                             ${content}
                         </div>

package/src/components/overlay/index.ts

@@ -1,14 +1,9 @@
-import { toArray } from '@esportsplus/utilities';
 import scrollbar from '~/components/scrollbar';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default template.factory<Parameters<typeof scrollbar>[0]>(
-    (attributes, content) => {
-        attributes.class = toArray(attributes.class);
-        attributes.class.push('overlay');
-
-        return scrollbar(attributes, content);
+export default scrollbar.bind({
+    attributes: {
+        class: 'overlay'
     }
-);
+});

package/src/components/page/index.ts

@@ -1,17 +1 @@
-import './scss/index.scss';
-
-
-const subtitle = {
-    class: 'page-subtitle --margin-200 --text-crop-bottom'
-};
-
-const suptitle = {
-    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
-};
-
-const title = {
-    class: 'page-title --line-height-200 --margin-400 --text-crop'
-};
-
-
-export default { subtitle, suptitle, title };
+import './scss/index.scss';

package/src/components/root/onclick.ts

@@ -1,20 +1,19 @@
-let queue: (VoidFunction | (() => Promise<void>))[] = [];
+import factory from '@esportsplus/queue';
 
 
-const onclick = async () => {
-    if (queue.length === 0) {
-        return;
-    }
+let queue = factory<VoidFunction | (() => Promise<void>)>(64);
 
+
+const onclick = async () => {
     let item;
 
-    while (item = queue.pop()) {
+    while (item = queue.next()) {
         await item();
     }
 };
 
 onclick.push = (fn: VoidFunction) => {
-    queue.push(fn);
+    queue.add(fn);
 };
 
 

package/src/components/scrollbar/index.ts

@@ -5,12 +5,18 @@ import template from '~/components/template';
 import './scss/index.scss';
 
 
+type A = Attributes & { scrollbar?: Attributes, 'scrollbar-container-content'?: Attributes };
+
+
+const OMIT = ['scrollbar', 'scrollbar-container-content'];
+
+
 let root = document.body,
     width: number | undefined;
 
 
-export default template.factory<Attributes & { scrollbar?: Attributes, 'scrollbar-container-content'?: Attributes }>(
-    (attributes, content) => {
+export default template.factory<A>(
+    function(attributes, content) {
         let state = reactive({
                 height: 100,
                 translate: 0
@@ -19,40 +25,45 @@ export default template.factory<Attributes & { scrollbar?: Attributes, 'scrollba
         return html`
             <div
                 class='scrollbar-container'
-                ${omit(attributes, ['scrollbar-container-content', 'scrollbar'])}
+                ${omit(attributes, OMIT)}
+                ${this.attributes && omit(this.attributes, OMIT)}
             >
                 <div
                     class='scrollbar-container-content'
-                    onscroll='${function(this: HTMLElement) {
-                        if (width === undefined) {
-                            width = this.offsetWidth - this.clientWidth;
+                    ${attributes['scrollbar-container-content']}
+                    ${this.attributes?.['scrollbar-container-content']}
+                    ${{
+                        onscroll: function() {
+                            if (width === undefined) {
+                                width = this.offsetWidth - this.clientWidth;
 
-                            if (width && width !== 17) {
-                                root.style.setProperty('--scrollbar-width', `${width}px`);
+                                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;
-                    }}'
-                    ${attributes['scrollbar-container-content']}
+                            state.height = (this.clientHeight / this.scrollHeight) * 100;
+                            state.translate = (this.scrollTop / this.clientHeight) * 100;
+                        }
+                    }}
                 >
                     ${content}
                 </div>
 
                 <div
-                    class='
-                        ${() => state.height >= 100 && 'scrollbar--hidden'}
-                        scrollbar
-                    '
-                    style='${() => `
-                        --translate: translate3d(0, ${state.translate}%, 0);
-                        --height: ${state.height}%;
-                    `}'
-                    ${attributes.scrollbar}
+                    class='scrollbar'
+                    ${this.attributes?.scrollbar}
+                    ${{
+                        class: () => state.height >= 100 && 'scrollbar--hidden',
+                        style: () => `
+                            --translate: translate3d(0, ${state.translate}%, 0);
+                            --height: ${state.height}%;
+                        `
+                    }}
                 >
                 </div>
             </div>
         `;
     }
-);
+);
+export type { A as Attributes }

package/src/components/sidebar/index.ts

@@ -1,14 +1,9 @@
-import { toArray } from '@esportsplus/utilities';
 import scrollbar from '~/components/scrollbar';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default template.factory<Parameters<typeof scrollbar>[0]>(
-    (attributes, content) => {
-        attributes.class = toArray(attributes.class);
-        attributes.class.push('sidebar');
-
-        return scrollbar(attributes, content);
+export default scrollbar.bind({
+    attributes: {
+        class: 'sidebar'
     }
-);
+});

package/src/components/site/index.ts

@@ -1,19 +1,11 @@
-import { toArray } from '@esportsplus/utilities';
 import { onclick } from '~/components/root';
 import scrollbar from '~/components/scrollbar';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default template.factory<Parameters<typeof scrollbar>[0]>(
-    (attributes, content) => {
-        attributes.class = toArray(attributes.class);
-        attributes.class.push('site');
-
-        attributes.onclick = onclick;
-
-        attributes.style ??= '--background-default: var(--color-black-400);';
-
-        return scrollbar(attributes, content);
+export default scrollbar.bind({
+    attributes: {
+        class: 'site',
+        onclick
     }
-);
+});

package/src/components/template/index.ts

@@ -1,25 +1,33 @@
-import { Renderable } from '@esportsplus/template';
+import { Attributes, Renderable } from '@esportsplus/template';
+import { EMPTY_OBJECT } from '@esportsplus/utilities';
 
 
-const factory = <A extends Record<string, unknown>, C = unknown>(template: (attributes: A, content: C) => Renderable) => {
-    function factory(content: C): Renderable;
-    function factory(attributes: A, content: C): Renderable;
-    function factory(one: A | C, two?: C): Renderable {
-        let content: C,
-            attributes: A = {} as A;
+const factory = <
+    A extends Attributes,
+    C = Renderable<unknown>,
+    Context = { attributes?: A, content?: C }
+>(
+    template: (this: Context, attributes: Readonly<A>, content: C) => Renderable<unknown>
+) => {
+    function factory(): Renderable<unknown>;
+    function factory(content: C): Renderable<unknown>;
+    function factory(attributes: A, content: C): Renderable<unknown>;
+    function factory(this: Context, one?: A | C, two?: C): Renderable<unknown> {
+        let attributes: A = {} as A,
+            content: C;
 
         if (two === undefined) {
             content = one as C;
         }
         else {
-            content = two;
             attributes = one as A;
+            content = two;
         }
 
-        return template(attributes, content);
+        return template.call(this, attributes, content);
     }
 
-    return factory;
+    return factory.bind(EMPTY_OBJECT);
 };