@esportsplus/ui 0.0.117 → 0.0.119

package/lib.scss

@@ -0,0 +1,2 @@
+// Dart sass doesn't support changing root directory for the package to 'src'
+@forward './src/lib';

package/package.json

@@ -12,18 +12,18 @@
     },
     "files": [
         "/build/**/*",
-        "/src/components/**/*.ts"
+        "/lib.scss",
+        "/tokens.scss"
     ],
     "main": "build/index.js",
     "name": "@esportsplus/ui",
     "private": false,
     "scripts": {
-        "build": "npm run build:ts && npm run build:web",
+        "build": "npm run build:ts && npm run build:assets",
         "build:ts": "tsc && tsc-alias",
-        "build:web": "webpack build --env=production=true",
+        "build:assets": "webpack build --env=production=true",
         "-": "-",
         "prepublishOnly": "npm run build"
     },
-    "types": "build/index.d.ts",
-    "version": "0.0.117"
+    "version": "0.0.119"
 }

package/tokens.scss

@@ -0,0 +1,2 @@
+// Dart sass doesn't support changing root directory for the package to 'src'
+@forward './src/tokens';

package/build/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-require("@esportsplus/webpack/global.d.ts");
-__exportStar(require("./components"), exports);

package/src/components/alert/index.ts

@@ -1,157 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-type Type = 'error' | 'info' | 'success';
-
-
-let modifiers: Record<Type, string> = {
-        error: 'red',
-        info: 'black',
-        success: 'green'
-    },
-    state = reactive({
-        active: false,
-        messages: new Set as Set<string>,
-        seconds: 0,
-        state: 'activating',
-        type: '' as Type
-    }),
-    timeout = 250;
-
-
-function activate(key: Type, messages: string | string[], seconds: number = 0) {
-    if (!Array.isArray(messages)) {
-        messages = [messages];
-    }
-
-    if (!messages.length) {
-        return;
-    }
-
-    if (state.type !== key) {
-        state.messages.clear();
-    }
-    else {
-        // @ts-ignore
-        state.type = '';
-    }
-
-    for (let message of messages) {
-        state.messages.add(message);
-    }
-
-    state.state = 'activating';
-    state.type = key;
-
-    // Slide in animation needs time
-    if (state.active) {
-        state.active = true;
-
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-        return;
-    }
-
-    setTimeout(() => {
-        state.active = true;
-
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-    }, timeout);
-}
-
-function deactivate() {
-    state.state = 'deactivating';
-
-    setTimeout(() => {
-        state.active = false;
-        state.messages.clear();
-    }, timeout);
-}
-
-
-const error = (messages: string | string[], seconds: number = 0) => activate('error', messages, seconds);
-
-const info = (messages: string | string[], seconds: number = 0) => activate('info', messages, seconds);
-
-const success = (messages: string | string[], seconds: number = 0) => activate('success', messages, seconds);
-
-
-const h = () => {
-    // TODO: Fix importing close svg
-    return () => state.active ? html`
-        <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
-                <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
-                    <div class="icon --size-300">
-                        ${html.inline`
-                            <svg width="16" height="16" viewBox="0 0 16 16">
-                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
-                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
-                            </svg>
-                        `}
-                    </div>
-                </div>
-            </div>
-
-            <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
-                <div class="alert-message --active --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
-                    <div class='--flex-row --flex-fill --flex-vertical'>
-                        <div class="--flex-fill --flex-column --padding-right --padding-400">
-                            <h5 class="page-title">
-                                ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
-                            </h5>
-                            ${() => state.type && [...state.messages].map((message) => html`
-                                <p class='--margin-top --margin-border-width-500'>${message}</p>
-                            `)}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    ` : '';
-};
-
-const types = ['error', 'info', 'success'] as const;
-
-
-export default { deactivate, error, html: h, info, success, types };

package/src/components/export/clipboard.ts

@@ -1,12 +0,0 @@
-export default (value: string) => {
-    let input = document.createElement('INPUT') as HTMLInputElement;
-
-    document.body.appendChild(input);
-
-    input.setAttribute('value', value);
-    input.select();
-
-    document.execCommand('copy');
-
-    document.body.removeChild(input);
-};

package/src/components/export/index.ts

@@ -1,5 +0,0 @@
-import clipboard from './clipboard';
-import json from './json';
-
-
-export default { clipboard, json };

package/src/components/export/json.ts

@@ -1,15 +0,0 @@
-export default (content: any[] | Record<string, any>, name: string) => {
-    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/src/components/field/checkbox.ts

@@ -1,61 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import description from './description';
-
-
-type Data = {
-    class?: string;
-    field?: {
-        content?: any;
-    };
-    mask?: {
-        class?: string;
-        style?: string;
-    };
-    name?: string;
-    style?: string;
-    title: string;
-    value?: any;
-} & Parameters<typeof description>[0];
-
-
-export default (data: Data) => {
-    let state = reactive({
-            active: false
-        });
-
-    return html`
-        <div
-            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
-            onchange='${(e: Event) => {
-                if ((e.target as HTMLInputElement).type !== 'checkbox') {
-                    return;
-                }
-
-                state.active = (e.target as HTMLInputElement)?.checked;
-            }}'
-            style='${data?.style || ''}'
-        >
-            <div class="field-title --flex-horizontal-space-between --flex-vertical">
-                ${data.title}
-
-                <label
-                    class="field-mask ${(data?.mask?.class || '').indexOf('field-mask--switch') === -1 ? 'field-mask--checkbox' : ''} --margin-left --margin-400 ${data?.mask?.class || ''}"
-                    style='${data?.mask?.style || ''}'
-                >
-                    <input
-                        class='field-tag field-tag--hidden'
-                        ${data.name ? `name='${data.name}'` : ''}
-                        type='checkbox'
-                        value='1'
-                        ${(data?.class || '').indexOf('--active') !== -1 || data?.value ? 'checked' : ''}
-                    >
-                </label>
-            </div>
-
-            ${data?.field?.content || ''}
-
-            ${description(data)}
-        </div>
-    `
-};

package/src/components/field/description.ts

@@ -1,12 +0,0 @@
-import { html } from '@esportsplus/template';
-
-
-export default (data: { description?: string }) => {
-    if (!data?.description) {
-        return '';
-    }
-
-    return html`
-        <div class='field-description --margin-top --margin-300'>${data.description}</div>
-    `;
-}

package/src/components/field/error.ts

@@ -1,14 +0,0 @@
-import { html } from '@esportsplus/template';
-
-
-export default (data: { error: string }) => {
-    return () => {
-        if (!data.error) {
-            return '';
-        }
-
-        return html`
-            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
-        `;
-    };
-}

package/src/components/field/file.ts

@@ -1,64 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { form } from '~/components';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    accept?: string;
-    class?: string;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    placeholder?: string;
-    style?: string;
-    type?: string;
-    value?: unknown;
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-
-
-export default (data: Data) => {
-    let state = reactive({
-            active: false,
-            error: ''
-        });
-
-    return html`
-        <div
-            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
-            onfocusin='${() => {
-                state.active = true;
-            }}'
-            onfocusout='${() => {
-                state.active = false;
-            }}'
-            style='${data?.style || ''}'
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
-                style='${data?.mask?.style || ''} cursor:pointer;'
-            >
-                <input
-                    ${data?.accept ? `accept='${data.accept}'` : ''}
-                    class='field-tag field-tag--hidden'
-                    name='${data.name}'
-                    onrender='${form.input.attributes(state)}'
-                    type='file'
-                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
-                >
-
-                ${data?.mask?.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/src/components/field/index.ts

@@ -1,10 +0,0 @@
-import checkbox from './checkbox';
-import file from './file';
-import optional from './optional';
-import select from './select';
-import s from './switch';
-import textarea from './textarea';
-import text from './text';
-
-
-export default { checkbox, file, optional, select, switch: s, textarea, text };

package/src/components/field/optional.ts

@@ -1,27 +0,0 @@
-import sel from './select';
-import s from './switch';
-import tex from './text';
-
-
-const select = (data: Parameters<typeof s>[0] & { field: Parameters<typeof sel>[0] }) => {
-    data.field.content = sel(
-        Object.assign(data.field || {}, {
-            class: `field--optional ${data?.field?.class || ''}`
-        })
-    );
-
-    return s(data);
-};
-
-const text = (data: Parameters<typeof s>[0] & { field: Parameters<typeof tex>[0] }) => {
-    data.field.content = tex(
-        Object.assign(data.field || {}, {
-            class: `field--optional ${data?.field?.class || ''}`
-        })
-    );
-
-    return s(data);
-};
-
-
-export default { select, text };

package/src/components/field/select.ts

@@ -1,149 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { form, scrollbar, root } from '~/components';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    class?: string;
-    effect?: (selected: number | string) => void;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    options: Record<number | string, number | string>;
-    option?: {
-        class?: string;
-        style?: string;
-    };
-    selected?: any;
-    scrollbar?: {
-        style?: string;
-    };
-    style?: string;
-    text?: {
-        class?: string;
-    };
-    tooltip?: {
-        class?: string;
-        direction?: any;
-        style?: string;
-    };
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-
-
-function parse(keys: (number | string)[], selected: number | string) {
-    let options: Record<string, boolean> = {};
-
-    for (let key of keys) {
-        options[key] = false;
-    }
-
-    options[selected] = true;
-
-    return {
-        options,
-        selected: selected || keys[0]
-    };
-}
-
-function template(data: Data, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
-    let { attributes: a, html: h } = scrollbar({
-            fixed: true,
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        });
-
-    return html`
-        <div
-            class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'
-            style='${data?.tooltip?.style || ''}'
-        >
-            <div
-                class='row --flex-column'
-                onclick='${(e: Event) => {
-                    let key = (e?.target as HTMLElement)?.dataset?.key;
-
-                    if (key === undefined) {
-                        return;
-                    }
-
-                    // Swap active
-                    state.options[key] = true;
-                    state.options[state.selected] = false;
-
-                    state.active = false;
-                    state.selected = key;
-
-                    if (data.effect) {
-                        data.effect(key);
-                    }
-                }}'
-                ${a}
-            >
-                ${Object.keys( data.options || {} ).map((key: number | string) => html`
-                    <div
-                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
-                        style='${data?.option?.style || ''}'
-                    >
-                        <span class="--text-truncate">
-                            ${data.options[key]}
-                        </span>
-                    </div>
-                `)}
-            </div>
-
-            ${h}
-        </div>
-    `;
-}
-
-
-export default (data: Data) => {
-    let state = reactive(Object.assign({
-            active: false,
-            error: '',
-            render: false,
-        }, parse(Object.keys( data.options || {} ), data.selected)));
-
-    return html`
-        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
-            ${title(data)}
-
-            <label
-                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
-                onclick='${() => {
-                    state.render = true;
-                    state.active = !state.active;
-
-                    if (state.active) {
-                        root.onclick.add(() => state.active = false);
-                    }
-                }}'
-                style='${data?.mask?.style || ''}'
-            >
-                <input
-                    class='field-tag field-tag--hidden'
-                    name='${data.name}'
-                    onclick='${() => { /* Prevent double click events from firing */ }}'
-                    onrender='${form.input.attributes(state)}'
-                    value='${() => state.selected}'
-                >
-
-                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
-                    ${() => data.options[ state.selected ] || '-'}
-                </div>
-
-                <div class='field-mask-arrow'></div>
-
-                ${() => state.render ? template(data, state) : ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/src/components/field/switch.ts

@@ -1,9 +0,0 @@
-import checkbox from './checkbox';
-
-
-export default (data: Parameters<typeof checkbox>[0]) => {
-    data.mask = data.mask || {};
-    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-
-    return checkbox(data);
-};

package/src/components/field/text.ts

@@ -1,68 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { form } from '~/components';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    class?: string;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    placeholder?: string;
-    style?: string;
-    tag?: {
-        class?: string;
-    };
-    textarea?: boolean;
-    type?: string;
-    value?: unknown;
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-
-
-export default (data: Data) => {
-    let state = reactive({
-            active: false,
-            error: ''
-        });
-
-    return html`
-        <div
-            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
-            onfocusin='${() => {
-                state.active = true;
-            }}'
-            onfocusout='${() => {
-                state.active = false;
-            }}'
-            style='${data?.style || ''}'
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) ? '--margin-top' : ''} --margin-300'
-                style='${data?.mask?.style || ''}'
-            >
-                <${data?.textarea ? 'textarea' : 'input'}
-                    class='field-tag --padding-400 ${data?.tag?.class || ''}'
-                    name='${data?.name || ''}'
-                    placeholder='${data?.placeholder || ''}'
-                    onrender='${form.input.attributes(state)}'
-                    type='${data?.type || 'string'}'
-                    ${!data?.textarea && data?.value !== undefined ? html`value='${data.value}'` : ''}
-                >
-                ${data?.textarea ? html`${data?.value || ''}</textarea>` : ''}
-
-                ${data?.mask?.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/src/components/field/textarea.ts

@@ -1,8 +0,0 @@
-import text from './text';
-
-
-export default (data: Parameters<typeof text>[0]) => {
-    data.textarea = true;
-
-    return text(data);
-};

package/src/components/field/title.ts

@@ -1,23 +0,0 @@
-import { html } from '@esportsplus/template';
-import { tooltip } from '~/components';
-
-
-export default (data: { required?: boolean, title?: string }) => {
-    if (!data?.title) {
-        return '';
-    }
-
-    let { attributes } = tooltip.onhover();
-
-    return html`
-        <div class="field-title --flex-horizontal-space-between --flex-vertical">
-            ${data.title}
-
-            ${data?.required && html`
-                <div class="bubble --background-primary --margin-left" ${attributes}>
-                    <span class="tooltip-message tooltip-message--w">Required</span>
-                </div>
-            `}
-        </div>
-    `;
-}

package/src/components/form/action.ts

@@ -1,68 +0,0 @@
-import { response } from '@esportsplus/action';
-import { Action } from './types';
-import alert from '~/components/alert';
-import input from './input';
-
-
-function parse(input: Record<string, any>) {
-    let data: Record<string, any> = {};
-
-    for (let path in input) {
-        let bucket = data,
-            keys = path.indexOf('.') !== -1 ? path.split('.') : [path];
-
-        for (let i = 0; i < keys.length - 1; i++) {
-            bucket = bucket[keys[i]] = bucket[keys[i]] || {};
-        }
-
-        bucket[ keys[keys.length - 1] ] = input[path];
-    }
-
-    return data;
-};
-
-
-export default function(action: Action) {
-    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) {
-            // TODO: Figure out processing
-             // - Could pass reactive value above and tie it to form layout handler
-            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;
-                }
-
-                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
-            }
-
-            // TODO: replace with signal
-            event?.submitter?.classList.remove('button--processing');
-        }
-    };
-};

package/src/components/form/index.ts

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

package/src/components/form/input.ts

@@ -1,15 +0,0 @@
-let cache = new WeakMap<HTMLInputElement | HTMLSelectElement, { error: string }>();
-
-
-const attributes = (reactive: { error: string }) => {
-    return (element: HTMLInputElement | HTMLSelectElement) => {
-        cache.set(element, reactive);
-    };
-};
-
-const get = (element?: HTMLInputElement | HTMLSelectElement) => {
-    return element ? cache.get(element) : undefined;
-};
-
-
-export default { attributes, get };

package/src/components/form/layout.ts

@@ -1,26 +0,0 @@
-import { html } from '@esportsplus/template';
-
-
-type Data = {
-    action?: any;
-    button?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    class?: string;
-    content?: any;
-};
-
-
-export default (data: 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/src/components/form/types.ts

@@ -1,16 +0,0 @@
-import { response, Response } from '@esportsplus/action';
-import alert from '~/components/alert';
-
-
-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 { Action, Errors, Payload };

package/src/components/index.ts

@@ -1,10 +0,0 @@
-export { default as alert }from './alert';
-export { default as export }from './export';
-export { default as field }from './field';
-export { default as form }from './form';
-export { default as number }from './number';
-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';

package/src/components/number/index.ts

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

package/src/components/page/index.ts

@@ -1,15 +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/src/components/root/index.ts

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

package/src/components/root/onclick.ts

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

package/src/components/scrollbar/index.ts

@@ -1,44 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-let root = document.body,
-    width: number | undefined;
-
-
-export default ({ fixed, style }: { fixed?: boolean, style?: string } = {}) => {
-    let state = reactive({
-            height: 100,
-            translate: 0
-        });
-
-    return {
-        attributes: {
-            class: () => {
-                return '--scrollbar-content';
-            },
-            onscroll: function(this: HTMLElement) {
-                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;
-            }
-        },
-        html: html`
-            <div
-                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
-                style='${() => `
-                    ${style || ''}
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-            ></div>
-        `
-    };
-};

package/src/components/site/index.ts

@@ -1,27 +0,0 @@
-import { html } from '@esportsplus/template';
-import { scrollbar } from '~/components';
-import { onclick } from '~/components/root';
-
-
-type Data = {
-    class?: string;
-    content?: any;
-    scrollbar?: {
-        style?: string;
-    };
-};
-
-
-export default (data: Data) => {
-    let { attributes: a, html: h } = scrollbar({
-            fixed: true,
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        });
-
-    return html`
-        <section class='site ${data?.class || ''}' onclick='${onclick}' ${a}>
-            ${data?.content || ''}
-            ${h}
-        </section>
-    `;
-};

package/src/components/tooltip/index.ts

@@ -1,94 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import menu from './menu';
-import root from '~/components/root';
-
-
-let queue: VoidFunction[] = [],
-    running = false,
-    scheduled = false;
-
-
-async function frame() {
-    if (running) {
-        return;
-    }
-
-    running = true;
-
-    let item;
-
-    while (item = queue.pop()) {
-        await item();
-    }
-
-    running = false;
-}
-
-
-const onclick = (data: { active?: boolean, menu?: Parameters<typeof menu>[0], toggle?: boolean } = {}) => {
-    let content,
-        state = reactive({
-            active: data.active || false,
-            render: undefined as boolean | undefined
-        });
-
-    if (data.menu) {
-        content = menu(data.menu, state);
-    }
-
-    return {
-        attributes: {
-            class: () => {
-                return `tooltip ${state.active ? '--active' : ''}`;
-            },
-            onclick: function(this: HTMLElement, e: Event) {
-                let active = true,
-                    node = e.target as Node | null;
-
-                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) {
-                    root.onclick.add(() => {
-                        frame();
-                        scheduled = false;
-                    });
-                    scheduled = true;
-                }
-            }
-        },
-        content,
-        state
-    };
-};
-
-const onhover = (active: boolean = false) => {
-    let state = reactive({
-            active,
-            render: undefined as boolean | undefined
-        });
-
-    return {
-        attributes: {
-            class: () => `tooltip ${state.active ? '--active' : ''}`,
-            onmouseover: () => {
-                state.active = true;
-            },
-            onmouseout: () => {
-                state.active = false;
-            }
-        },
-        state
-    };
-};
-
-
-export default { onclick, onhover };

package/src/components/tooltip/menu.ts

@@ -1,71 +0,0 @@
-import { effect } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-type Data = {
-    class?: string;
-    direction?: string;
-    items?: {
-        border?: {
-            class?: string;
-        };
-        class?: string;
-        onclick?: (...args: any[]) => void;
-        style?: string;
-        svg?: string;
-        target?: string;
-        text: string;
-        url?: string;
-    }[];
-    state?: { active?: boolean };
-    style?: string;
-};
-
-
-function template(data: Data) {
-    return 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`
-                    <div
-                        class="border ${item?.border?.class || ''}"
-                        style='
-                            margin-left: calc(var(--margin-horizontal) * -1);
-                            width: calc(100% + var(--margin-horizontal) * 2);
-                        '
-                    ></div>
-                ` : ''}
-
-                <${item?.url ? 'a' : 'div'}
-                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? html`onclick='${item.onclick}'` : ''}
-                    style='${item?.style || ''}'
-                    ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-                >
-                    ${item?.svg ? html`
-                        <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
-                            ${item.svg}
-                        </div>
-                    ` : ''}
-
-                    <div class="text --color-text --flex-fill">
-                        ${item.text}
-                    </div>
-                </${item?.url ? 'a' : 'div'}>
-            `)}
-        </div>
-    `;
-}
-
-
-// TODO: There's nothing binding activate to tooltip menu ( this is never called outside initial effect run )
-export default (data: Data, state: { active?: boolean, render?: boolean }) => {
-    effect(() => {
-        if (!state.active || state.render) {
-            return;
-        }
-
-        state.render = true;
-    });
-
-    return () => state.render ? template(data) : '';
-};