@esportsplus/ui 0.8.3 → 0.9.0

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

@@ -1,25 +0,0 @@
-type Data = {
-    copyright: {
-        attributes?: Record<string, unknown>;
-        brand: string;
-    };
-    footer?: {
-        attributes: Record<string, unknown>;
-    };
-    nav?: {
-        attributes?: Record<string, unknown>;
-        links: {
-            text: string;
-            url: string;
-        }[];
-    };
-    social?: {
-        attributes?: Record<string, unknown>;
-        links: {
-            icon: string;
-            url: string;
-        }[];
-    };
-};
-declare const _default: ({ copyright, footer, nav, social }: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/footer/index.js

@@ -1,55 +0,0 @@
-import { html, svg } from '@esportsplus/template';
-function copy({ attributes, brand }) {
-    return html `
-        <div class='footer-copyright group-item --flex-center'>
-            <div class='text --padding-vertical --padding-300 --text-300' style='--color-default: var(--color-grey-500);' ${attributes}>
-                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
-            </div>
-        </div>
-    `;
-}
-export default ({ copyright, footer, nav, social }) => {
-    return html `
-        <footer class='footer' ${footer?.attributes}>
-            <div class='container'>
-                <div class='group group--offset-top --flex-center --margin-400'>
-
-                    ${nav
-        ? nav.links.map(({ text, url }) => html `
-                            <div class='group-item'>
-                                <a
-                                    class='link --color-white --padding-vertical-300 --text-300'
-                                    href='${url}'
-                                    style='--color-default: var(--color-grey-500);'
-                                    ${nav.attributes}
-                                >
-                                    ${text}
-                                </a>
-                            </div>
-                        `)
-        : copy(copyright)}
-
-                    <div class='footer-break'></div>
-
-                    ${social?.links && social.links.map(({ icon, url }) => html `
-                        <div class='group-item'>
-                            <a
-                                class='link --color-white --padding-0px'
-                                href='${url}'
-                                style='--color-default: var(--color-grey-500);'
-                                ${social.attributes}
-                            >
-                                <div class='icon --size-500'>
-                                    ${svg.sprite(icon)}
-                                </div>
-                            </a>
-                        </div>
-                    `)}
-
-                    ${nav && copy(copyright)}
-
-                </div>
-            </div>
-        </footer>
-    `;
-};

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

@@ -1,5 +0,0 @@
-import { Action } from './types.js';
-export default function (action: Action): {
-    onclick: (this: HTMLFormElement, event: Event) => void;
-    onsubmit: (this: HTMLFormElement, event: SubmitEvent) => Promise<void>;
-};

package/build/components/form/action.js

@@ -1,54 +0,0 @@
-import response from '@esportsplus/action';
-import input from './input.js';
-function parse(input) {
-    let data = {};
-    for (let [path, value] of input) {
-        let bucket = data, segments = path.indexOf('.') !== -1 ? path.split('.') : [path];
-        for (let i = 0; i < segments.length - 1; i++) {
-            bucket = bucket[segments[i]] = bucket[segments[i]] || {};
-        }
-        let key = segments.at(-1);
-        if (path.endsWith('[]')) {
-            if (typeof value === 'string' && value.trim() === '') {
-                continue;
-            }
-            bucket = bucket[key.substring(0, key.length - 2)] ??= [];
-            bucket.push(value);
-        }
-        else {
-            bucket[key] = value;
-        }
-    }
-    return data;
-}
-;
-export default function (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: null,
-                input: parse(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;
-                }
-                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
-            }
-            event?.submitter?.classList.remove('button--processing');
-        }
-    };
-}
-;

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

@@ -1,23 +0,0 @@
-import action from './action.js';
-declare const _default: {
-    action: typeof action;
-    input: {
-        attributes: (reactive: {
-            error: string;
-        }) => (element: HTMLInputElement | HTMLSelectElement) => void;
-        get: (element?: HTMLInputElement | HTMLSelectElement) => {
-            error: string;
-        } | undefined;
-    };
-    layout: (data: {
-        action?: any;
-        button?: {
-            class?: string;
-            content?: any;
-            style?: string;
-        };
-        class?: string;
-        content?: any;
-    }) => import("@esportsplus/template/build/types").RenderableTemplate;
-};
-export default _default;

package/build/components/form/index.js

@@ -1,4 +0,0 @@
-import action from './action.js';
-import input from './input.js';
-import layout from './layout.js';
-export default { action, input, layout };

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

@@ -1,9 +0,0 @@
-declare const _default: {
-    attributes: (reactive: {
-        error: string;
-    }) => (element: HTMLInputElement | HTMLSelectElement) => void;
-    get: (element?: HTMLInputElement | HTMLSelectElement) => {
-        error: string;
-    } | undefined;
-};
-export default _default;

package/build/components/form/input.js

@@ -1,10 +0,0 @@
-let cache = new WeakMap();
-const attributes = (reactive) => {
-    return (element) => {
-        cache.set(element, reactive);
-    };
-};
-const get = (element) => {
-    return element ? cache.get(element) : undefined;
-};
-export default { attributes, get };

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

@@ -1,12 +0,0 @@
-type Data = {
-    action?: any;
-    button?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    class?: string;
-    content?: any;
-};
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/form/layout.js

@@ -1,12 +0,0 @@
-import { html } from '@esportsplus/template';
-export default (data) => html `
-    <form class='${data?.class}' ${data?.action || ''}>
-        ${data?.content || ''}
-
-        ${data?.button?.content ? html `
-            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
-                ${data?.button?.content || ''}
-            </button>
-        ` : ''}
-    </form>
-`;

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

@@ -1,11 +0,0 @@
-import response, { Response } from '@esportsplus/action';
-type Action = (data: Payload) => Promise<Errors> | Errors;
-type Errors = {
-    errors: Response<unknown>['errors'];
-};
-type Payload = {
-    alert: typeof alert;
-    input: Record<string, any>;
-    response: typeof response;
-};
-export type { Action, Errors, Payload };

package/build/components/form/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,8 +0,0 @@
-declare const _default: (background: string) => {
-    attributes: {
-        class: string;
-        onrender: (element: HTMLElement & Record<PropertyKey, unknown>) => void;
-        style: (string | (() => string))[];
-    };
-};
-export default _default;

package/build/components/highlight/index.js

@@ -1,36 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-let key = Symbol(), observer = null;
-export default (background) => {
-    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 {
-        attributes: {
-            class: 'highlight',
-            onrender: function (element) {
-                element[key] = state;
-                observer.observe(element);
-            },
-            style: [`--background: ${background}`, () => `--highlight: ${state.highlight}`]
-        }
-    };
-};

package/build/components/index.d.ts

@@ -1,19 +0,0 @@
-export { default as accordion } from './accordion/index.js';
-export { default as clipboard } from './clipboard/index.js';
-export { default as counter } from './counter/index.js';
-export { default as ellipsis } from './ellipsis/index.js';
-export { default as footer } from './footer/index.js';
-export { default as form } from './form/index.js';
-export { default as json } from './json/index.js';
-export { default as link } from './link/index.js';
-export { default as loader } from './loader/index.js';
-export { default as loading } from './loading/index.js';
-export { default as magnet } from './magnet/index.js';
-export { default as number } from './number/index.js';
-export { default as page } from './page/index.js';
-export { default as root } from './root/index.js';
-export { default as scrollbar } from './scrollbar/index.js';
-export { default as site } from './site/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

@@ -1,19 +0,0 @@
-export { default as accordion } from './accordion/index.js';
-export { default as clipboard } from './clipboard/index.js';
-export { default as counter } from './counter/index.js';
-export { default as ellipsis } from './ellipsis/index.js';
-export { default as footer } from './footer/index.js';
-export { default as form } from './form/index.js';
-export { default as json } from './json/index.js';
-export { default as link } from './link/index.js';
-export { default as loader } from './loader/index.js';
-export { default as loading } from './loading/index.js';
-export { default as magnet } from './magnet/index.js';
-export { default as number } from './number/index.js';
-export { default as page } from './page/index.js';
-export { default as root } from './root/index.js';
-export { default as scrollbar } from './scrollbar/index.js';
-export { default as site } from './site/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

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

package/build/components/json/download.js

@@ -1,8 +0,0 @@
-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

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

package/build/components/json/index.js

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

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

@@ -1,10 +0,0 @@
-declare const _default: ({ attributes, content }: {
-    attributes?: Record<string, any>;
-    content: any;
-}) => {
-    attributes: {
-        class: string;
-    };
-    content: import("@esportsplus/template/build/types").RenderableTemplate;
-};
-export default _default;

package/build/components/link/hover.js

@@ -1,17 +0,0 @@
-import { html } from '@esportsplus/template';
-export default ({ attributes, content }) => {
-    return {
-        attributes: {
-            class: 'link--hover'
-        },
-        content: html `
-            <span class='link-hover link-hover--one' ${attributes}>
-                ${content}
-            </span>
-
-            <span class='link-hover link-hover--two' ${attributes}>
-                ${content}
-            </span>
-        `
-    };
-};

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

@@ -1,12 +0,0 @@
-declare const _default: {
-    hover: ({ attributes, content }: {
-        attributes?: Record<string, any>;
-        content: any;
-    }) => {
-        attributes: {
-            class: string;
-        };
-        content: import("@esportsplus/template/build/types").RenderableTemplate;
-    };
-};
-export default _default;

package/build/components/link/index.js

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

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

@@ -1,5 +0,0 @@
-declare const _default: ({ attributes, content }: {
-    attributes?: Record<PropertyKey, unknown>;
-    content: any;
-}) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/loader/index.js

@@ -1,31 +0,0 @@
-import { html } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-export default ({ attributes, content }) => {
-    let state = reactive({
-        load: false,
-        scale: false
-    });
-    setTimeout(() => {
-        state.scale = true;
-    }, 300);
-    return html `
-        <div class="loader ${() => state.load && 'loader--load'}">
-            <div class="loader ${() => state.load && 'loader--load'}">
-                <div class="loader-content">
-                    <div
-                        class="loader-logo ${() => state.scale && 'loader-logo--scale'} text --flex-center --text-uppercase --text-600"
-                        style='color: var(--color-grey-500);'
-                        onanimationend='${({ animationName: name }) => {
-        if (name === 'scale') {
-            state.load = true;
-        }
-    }}'
-                        ${attributes}
-                    >
-                        ${content}
-                    </div>
-                </div>
-            </div>
-        </div>
-    `;
-};

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

@@ -1,2 +0,0 @@
-declare const _default: (properties?: Record<PropertyKey, unknown>) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/loading/index.js

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

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

@@ -1,10 +0,0 @@
-declare const _default: ({ attributes, hide }: {
-    attributes?: Record<string, unknown>;
-    hide?: boolean;
-}) => {
-    html: import("@esportsplus/template/build/types").RenderableTemplate;
-    sibling: {
-        attributes: Record<string, Function>;
-    };
-};
-export default _default;

package/build/components/magnet/index.js

@@ -1,46 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-export default ({ attributes, hide }) => {
-    let active = false, events = {
-        onmouseover: function () {
-            let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
-            active = true;
-            state.height = offsetHeight;
-            state.left = offsetLeft;
-            state.opacity = 1;
-            state.top = offsetTop;
-            state.width = offsetWidth;
-        }
-    }, state = reactive({
-        height: null,
-        hide: true,
-        left: 0,
-        opacity: 0,
-        top: 0,
-        width: 0
-    });
-    if (hide === true) {
-        events.onmouseout = () => {
-            active = false;
-            setTimeout(() => {
-                if (active === true) {
-                    return;
-                }
-                state.opacity = 0;
-            }, 50);
-        };
-    }
-    return {
-        html: html `
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
-        `,
-        sibling: {
-            attributes: events
-        }
-    };
-};

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

@@ -1,8 +0,0 @@
-declare const abbreviate: (number: number) => string;
-declare const ordinal: (number: number) => string;
-declare const _default: {
-    abbreviate: (number: number) => string;
-    ordinal: (number: number) => string;
-};
-export default _default;
-export { abbreviate, ordinal };

package/build/components/number/index.js

@@ -1,16 +0,0 @@
-let formatter = null, suffixes = ['th', 'st', 'nd', 'rd'];
-const abbreviate = (number) => {
-    if (formatter === null) {
-        formatter = new Intl.NumberFormat('en-GB', {
-            notation: 'compact',
-            compactDisplay: 'short'
-        });
-    }
-    return formatter.format(number);
-};
-const ordinal = (number) => {
-    let value = number % 100;
-    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
-};
-export default { abbreviate, ordinal };
-export { abbreviate, ordinal };

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

@@ -1,22 +0,0 @@
-declare const subtitle: {
-    class: string;
-};
-declare const suptitle: {
-    class: string;
-};
-declare const title: {
-    class: string;
-};
-declare const _default: {
-    subtitle: {
-        class: string;
-    };
-    suptitle: {
-        class: string;
-    };
-    title: {
-        class: string;
-    };
-};
-export default _default;
-export { subtitle, suptitle, title };

package/build/components/page/index.js

@@ -1,11 +0,0 @@
-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 };
-export { subtitle, suptitle, title };

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

@@ -1,9 +0,0 @@
-import onclick from './onclick.js';
-declare const _default: {
-    onclick: {
-        (): Promise<void>;
-        add(fn: VoidFunction): void;
-    };
-};
-export default _default;
-export { onclick };

package/build/components/root/index.js

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

package/build/components/root/onclick.d.ts

@@ -1,5 +0,0 @@
-declare const onclick: {
-    (): Promise<void>;
-    add(fn: VoidFunction): void;
-};
-export default onclick;

package/build/components/root/onclick.js

@@ -1,14 +0,0 @@
-let queue = [];
-const onclick = async () => {
-    if (queue.length === 0) {
-        return;
-    }
-    let item;
-    while (item = queue.pop()) {
-        await item();
-    }
-};
-onclick.add = (fn) => {
-    queue.push(fn);
-};
-export default onclick;

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

@@ -1,13 +0,0 @@
-declare const _default: ({ attributes, fixed }?: {
-    attributes?: Record<string, unknown>;
-    fixed?: boolean;
-}) => {
-    html: import("@esportsplus/template/build/types").RenderableTemplate;
-    parent: {
-        attributes: {
-            class: string;
-            onscroll: (this: HTMLElement) => void;
-        };
-    };
-};
-export default _default;