@esportsplus/ui 0.24.3 → 0.24.5

package/build/components/field/select.d.ts

@@ -1,14 +1,54 @@
 import { type Attributes, type Renderable } from '@esportsplus/template';
-import { Attributes as Attr } from '../../components/scrollbar/index.js';
-import template from '../../components/template/index.js';
-type A = {
-    'field-mask-arrow'?: Attributes;
-    'field-mask-tag'?: Attributes;
-    'field-mask-text'?: Attributes;
-    'tooltip-content'?: Attributes & {
-        direction?: string;
-    };
-} & Attributes & Attr;
+declare const select: {
+    (): ReturnType<(this: {
+        options: {
+            content: unknown;
+        } & Attributes;
+        option?: Attributes;
+        state: {
+            active: boolean;
+            error: string;
+            render: boolean;
+            selected: string | number;
+        };
+    }, attributes: Readonly<Attributes>, content: Renderable<unknown>) => Renderable<any>>;
+    <T extends Attributes>(attributes: T): ReturnType<(this: {
+        options: {
+            content: unknown;
+        } & Attributes;
+        option?: Attributes;
+        state: {
+            active: boolean;
+            error: string;
+            render: boolean;
+            selected: string | number;
+        };
+    }, attributes: Readonly<Attributes>, content: Renderable<unknown>) => Renderable<any>>;
+    <T extends Renderable<unknown>>(content: T): ReturnType<(this: {
+        options: {
+            content: unknown;
+        } & Attributes;
+        option?: Attributes;
+        state: {
+            active: boolean;
+            error: string;
+            render: boolean;
+            selected: string | number;
+        };
+    }, attributes: Readonly<Attributes>, content: Renderable<unknown>) => Renderable<any>>;
+    (attributes: Attributes, content: Renderable<unknown>): ReturnType<(this: {
+        options: {
+            content: unknown;
+        } & Attributes;
+        option?: Attributes;
+        state: {
+            active: boolean;
+            error: string;
+            render: boolean;
+            selected: string | number;
+        };
+    }, attributes: Readonly<Attributes>, content: Renderable<unknown>) => Renderable<any>>;
+};
 declare const _default: {
     (): ReturnType<(this: {
         attributes?: ({
@@ -140,7 +180,7 @@ declare const _default: {
                 selected?: number | string;
             };
         })))) | undefined;
-        content?: ((mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) | undefined;
+        content?: ((mask: typeof select) => Renderable<unknown>) | undefined;
     }, attributes: Readonly<{
         [key: `aria-${string}`]: string | number | boolean | undefined;
         [key: `data-${string}`]: string | undefined;
@@ -269,7 +309,7 @@ declare const _default: {
             render: boolean;
             selected?: number | string;
         };
-    })))>, content: (mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) => Renderable<any>>;
+    })))>, content: (mask: typeof select) => Renderable<unknown>) => Renderable<any>>;
     <T extends {
         [key: `aria-${string}`]: string | number | boolean | undefined;
         [key: `data-${string}`]: string | undefined;
@@ -528,7 +568,7 @@ declare const _default: {
                 selected?: number | string;
             };
         })))) | undefined;
-        content?: ((mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) | undefined;
+        content?: ((mask: typeof select) => Renderable<unknown>) | undefined;
     }, attributes: Readonly<{
         [key: `aria-${string}`]: string | number | boolean | undefined;
         [key: `data-${string}`]: string | undefined;
@@ -657,8 +697,8 @@ declare const _default: {
             render: boolean;
             selected?: number | string;
         };
-    })))>, content: (mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) => Renderable<any>>;
-    <T extends (mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>>(content: T): ReturnType<(this: {
+    })))>, content: (mask: typeof select) => Renderable<unknown>) => Renderable<any>>;
+    <T extends (mask: typeof select) => Renderable<unknown>>(content: T): ReturnType<(this: {
         attributes?: ({
             [key: `aria-${string}`]: string | number | boolean | undefined;
             [key: `data-${string}`]: string | undefined;
@@ -788,7 +828,7 @@ declare const _default: {
                 selected?: number | string;
             };
         })))) | undefined;
-        content?: ((mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) | undefined;
+        content?: ((mask: typeof select) => Renderable<unknown>) | undefined;
     }, attributes: Readonly<{
         [key: `aria-${string}`]: string | number | boolean | undefined;
         [key: `data-${string}`]: string | undefined;
@@ -917,7 +957,7 @@ declare const _default: {
             render: boolean;
             selected?: number | string;
         };
-    })))>, content: (mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) => Renderable<any>>;
+    })))>, content: (mask: typeof select) => Renderable<unknown>) => Renderable<any>>;
     (attributes: {
         [key: `aria-${string}`]: string | number | boolean | undefined;
         [key: `data-${string}`]: string | undefined;
@@ -1046,7 +1086,7 @@ declare const _default: {
             render: boolean;
             selected?: number | string;
         };
-    }))), content: (mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>): ReturnType<(this: {
+    }))), content: (mask: typeof select) => Renderable<unknown>): ReturnType<(this: {
         attributes?: ({
             [key: `aria-${string}`]: string | number | boolean | undefined;
             [key: `data-${string}`]: string | undefined;
@@ -1176,7 +1216,7 @@ declare const _default: {
                 selected?: number | string;
             };
         })))) | undefined;
-        content?: ((mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) | undefined;
+        content?: ((mask: typeof select) => Renderable<unknown>) | undefined;
     }, attributes: Readonly<{
         [key: `aria-${string}`]: string | number | boolean | undefined;
         [key: `data-${string}`]: string | undefined;
@@ -1305,6 +1345,6 @@ declare const _default: {
             render: boolean;
             selected?: number | string;
         };
-    })))>, content: (mask: ReturnType<typeof template.factory<A>>) => Renderable<unknown>) => Renderable<any>>;
+    })))>, content: (mask: typeof select) => Renderable<unknown>) => Renderable<any>>;
 };
 export default _default;

package/build/components/field/select.js

@@ -30,13 +30,13 @@ function set(state, value) {
         field = null;
     }
 }
-const select = function (attributes, content) {
+const select = template.factory(function (attributes, content) {
     let { option, options, state } = this;
     return html `
-        <label
-            class='field-mask field-mask--select'
-            ${omit(attributes, OMIT_MASK)}
-            ${{
+            <label
+                class='field-mask field-mask--select'
+                ${omit(attributes, OMIT_MASK)}
+                ${{
         onclick: () => {
             if (state.render) {
                 set(state, !state.active);
@@ -44,28 +44,28 @@ const select = function (attributes, content) {
             state.render = true;
         }
     }}
-        >
-            <input class='field-mask-tag field-mask-tag--hidden'
-                ${{
+            >
+                <input class='field-mask-tag field-mask-tag--hidden'
+                    ${{
         name: attributes.name,
         onclick: () => { },
         onrender: form.input.onrender(state),
         value: () => state.selected
     }}
-                ${attributes['field-mask-tag']}
-            >
+                    ${attributes['field-mask-tag']}
+                >
 
-            ${content || html `
-                <div class='field-mask-text' ${attributes['field-mask-text']}>
-                    ${() => {
+                ${content || html `
+                    <div class='field-mask-text' ${attributes['field-mask-text']}>
+                        ${() => {
         return (options[state.selected]?.content || '-');
     }}
-                </div>
-            `}
+                    </div>
+                `}
 
-            <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
+                <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
 
-            ${() => {
+                ${() => {
         if (!state.render) {
             return;
         }
@@ -93,23 +93,23 @@ const select = function (attributes, content) {
             scrollbar: attributes['scrollbar'],
             'scrollbar-container-content': attributes['scrollbar-container-content']
         }, keys.map((key) => html `
-                        <div class='link'
-                            ${omit(options[key], OMIT_OPTION)}
-                            ${option}
-                            ${{
+                            <div class='link'
+                                ${omit(options[key], OMIT_OPTION)}
+                                ${option}
+                                ${{
             class: () => selected[key] && '--active',
             'data-key': key
         }}
-                        >
-                            <span class='--text-truncate --pointer-none'>
-                                ${options[key].content}
-                            </span>
-                        </div>
-                    `));
+                            >
+                                <span class='--text-truncate --pointer-none'>
+                                    ${options[key].content}
+                                </span>
+                            </div>
+                        `));
     }}
-        </label>
-    `;
-};
+            </label>
+        `;
+});
 export default template.factory((attributes, content) => {
     let options = attributes.options, state = attributes.state || reactive({
         active: false,

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

@@ -0,0 +1,20 @@
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("../../components/scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: import("../../components/scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: import("../../components/scrollbar/index.js").Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<import("../../components/scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/frame/index.js

@@ -0,0 +1,7 @@
+import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
+export default scrollbar.bind({
+    attributes: {
+        class: 'frame'
+    }
+});

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/grid/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/group/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

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

@@ -0,0 +1,21 @@
+import { Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/highlight/index.js

@@ -0,0 +1,48 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
+import './scss/index.scss';
+const OMIT = ['background'];
+let key = Symbol(), observer = null;
+export default template.factory((attributes, 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];
+                if (target.isConnected) {
+                    target[key].highlight = +isIntersecting;
+                }
+                else {
+                    disconnected++;
+                    observer.unobserve(target);
+                }
+            }
+            if (n - disconnected === 0) {
+                observer.disconnect();
+                observer = null;
+            }
+        }, { threshold: 1 });
+    }
+    let state = reactive({
+        highlight: 0
+    });
+    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/build/components/icon/index.d.ts

@@ -0,0 +1,20 @@
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string) => import("@esportsplus/template").Renderable<any>>;
+    <T extends string>(content: T): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: import("@esportsplus/template").Attributes, content: string): ReturnType<(this: {
+        attributes?: import("@esportsplus/template").Attributes | undefined;
+        content?: string | undefined;
+    }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: string) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/icon/index.js

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

package/build/components/index.d.ts

@@ -0,0 +1,37 @@
+export { default as accordion } from './accordion/index.js';
+export * as anchor from './anchor/index.js';
+export * as banner from './banner/index.js';
+export * as border from './border/index.js';
+export * as bubble from './bubble/index.js';
+export * as button from './button/index.js';
+export * as card from './card/index.js';
+export { default as clipboard } from './clipboard/index.js';
+export * as container from './container/index.js';
+export { default as counter } from './counter/index.js';
+export { default as ellipsis } from './ellipsis/index.js';
+export { default as field } from './field/index.js';
+export { default as form } from './form/index.js';
+export * as frame from './frame/index.js';
+export * as grid from './grid/index.js';
+export * as group from './group/index.js';
+export { default as highlight } from './highlight/index.js';
+export { default as icon } from './icon/index.js';
+export { default as json } from './json/index.js';
+export * as link from './link/index.js';
+export { default as loader } from './loader/index.js';
+export { default as loading } from './loading/index.js';
+export * as modal from './modal/index.js';
+export { default as number } from './number/index.js';
+export { default as overlay } from './overlay/index.js';
+export * from './page/index.js';
+export { default as root } from './root/index.js';
+export * as row from './row/index.js';
+export { default as scrollbar } from './scrollbar/index.js';
+export { default as sidebar } from './sidebar/index.js';
+export { default as site } from './site/index.js';
+export { default as template } from './template/index.js';
+export * as text from './text/index.js';
+export * as thumbnail from './thumbnail/index.js';
+export { default as tooltip } from './tooltip/index.js';
+export { default as truncate } from './truncate/index.js';
+export { default as typewriter } from './typewriter/index.js';

package/build/components/index.js

@@ -0,0 +1,37 @@
+export { default as accordion } from './accordion/index.js';
+export * as anchor from './anchor/index.js';
+export * as banner from './banner/index.js';
+export * as border from './border/index.js';
+export * as bubble from './bubble/index.js';
+export * as button from './button/index.js';
+export * as card from './card/index.js';
+export { default as clipboard } from './clipboard/index.js';
+export * as container from './container/index.js';
+export { default as counter } from './counter/index.js';
+export { default as ellipsis } from './ellipsis/index.js';
+export { default as field } from './field/index.js';
+export { default as form } from './form/index.js';
+export * as frame from './frame/index.js';
+export * as grid from './grid/index.js';
+export * as group from './group/index.js';
+export { default as highlight } from './highlight/index.js';
+export { default as icon } from './icon/index.js';
+export { default as json } from './json/index.js';
+export * as link from './link/index.js';
+export { default as loader } from './loader/index.js';
+export { default as loading } from './loading/index.js';
+export * as modal from './modal/index.js';
+export { default as number } from './number/index.js';
+export { default as overlay } from './overlay/index.js';
+export * from './page/index.js';
+export { default as root } from './root/index.js';
+export * as row from './row/index.js';
+export { default as scrollbar } from './scrollbar/index.js';
+export { default as sidebar } from './sidebar/index.js';
+export { default as site } from './site/index.js';
+export { default as template } from './template/index.js';
+export * as text from './text/index.js';
+export * as thumbnail from './thumbnail/index.js';
+export { default as tooltip } from './tooltip/index.js';
+export { default as truncate } from './truncate/index.js';
+export { default as typewriter } from './typewriter/index.js';

package/build/components/json/download.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (content: any[] | Record<PropertyKey, any>, name: string) => void;
+export default _default;

package/build/components/json/download.js

@@ -0,0 +1,8 @@
+export default (content, name) => {
+    let link = document.createElement('a');
+    link.download = name + '.json';
+    link.href = window.URL.createObjectURL(new Blob([JSON.stringify(content)], { type: 'application/json' }));
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    download: (content: any[] | Record<PropertyKey, any>, name: string) => void;
+};
+export default _default;

package/build/components/json/index.js

@@ -0,0 +1,2 @@
+import download from './download.js';
+export default { download };

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/link/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

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

@@ -0,0 +1,21 @@
+import { Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const _default: {
+    (): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        attributes?: Attributes | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+};
+export default _default;

package/build/components/loader/index.js

@@ -0,0 +1,67 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
+import './scss/index.scss';
+const OMIT = ['loader-content', 'loader-logo'];
+export default template.factory((attributes, content) => {
+    let a = {
+        class: () => state.load && 'loader--load'
+    }, state = reactive({
+        load: false,
+        remove: false,
+        scale: false
+    });
+    return () => {
+        if (state.remove) {
+            return;
+        }
+        let i = 0;
+        return html `
+                <div
+                    class='loader'
+                    onanimationend=${(e) => {
+            i++;
+            if (e.animationName === 'move' && i > 1) {
+                state.remove = true;
+            }
+        }}
+                    ${a}
+                    ${omit(attributes, OMIT)}
+                >
+                    <div
+                        class='loader'
+                        ${a}
+                        ${!content && {
+            onconnect: () => {
+                state.load = true;
+            }
+        }}
+                    >
+                        ${content && html `
+                            <div class='loader-content' ${attributes['loader-content']}>
+                                <div
+                                    class='loader-logo text --flex-center --text-uppercase --text-600'
+                                    style='color: var(--color-grey-500);'
+                                    ${attributes['loader-logo']}
+                                    ${{
+            class: () => state.scale && 'loader-logo--scale',
+            onanimationend: ({ animationName: name }) => {
+                if (name === 'scale') {
+                    state.load = true;
+                }
+            },
+            onconnect: () => {
+                state.scale = true;
+            }
+        }}
+                                >
+                                    ${content}
+                                </div>
+                            </div>
+                        `}
+                    </div>
+                </div>
+            `;
+    };
+});

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

@@ -0,0 +1,4 @@
+import { Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+declare const _default: (attributes?: Attributes) => Node;
+export default _default;

package/build/components/loading/index.js

@@ -0,0 +1,12 @@
+import { html } from '@esportsplus/template';
+import './scss/index.scss';
+export default (attributes) => {
+    return html `
+        <div
+            class='loading --border-width-700 --size-800'
+            style='--border-color: var(--color-border-500);'
+            ${attributes}
+        >
+        </div>
+    `;
+};

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

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/modal/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

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

@@ -0,0 +1,2 @@
+import { number } from '@esportsplus/utilities';
+export default number;

package/build/components/number/index.js

@@ -0,0 +1,2 @@
+import { number } from '@esportsplus/utilities';
+export default number;