@esportsplus/ui 0.0.121 → 0.0.122

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

@@ -0,0 +1,92 @@
+declare const _default: {
+    select: (data: {
+        class?: string | undefined;
+        field?: {
+            content?: any;
+        } | undefined;
+        mask?: {
+            class?: string | undefined;
+            style?: string | undefined;
+        } | undefined;
+        name?: string | undefined;
+        style?: string | undefined;
+        title: string;
+        value?: any;
+    } & {
+        description?: string | undefined;
+    } & {
+        field: {
+            class?: string | undefined;
+            effect?: ((selected: string | number) => void) | undefined;
+            mask?: {
+                class?: string | undefined;
+                content?: any;
+                style?: string | undefined;
+            } | undefined;
+            name?: string | undefined;
+            options: Record<string | number, string | number>;
+            option?: {
+                class?: string | undefined;
+                style?: string | undefined;
+            } | undefined;
+            selected?: any;
+            scrollbar?: {
+                style?: string | undefined;
+            } | undefined;
+            style?: string | undefined;
+            text?: {
+                class?: string | undefined;
+            } | undefined;
+            tooltip?: {
+                class?: string | undefined;
+                direction?: any;
+                style?: string | undefined;
+            } | undefined;
+        } & {
+            description?: string | undefined;
+        } & {
+            required?: boolean | undefined;
+            title?: string | undefined;
+        };
+    }) => import("@esportsplus/template/build/types").Renderable;
+    text: (data: {
+        class?: string | undefined;
+        field?: {
+            content?: any;
+        } | undefined;
+        mask?: {
+            class?: string | undefined;
+            style?: string | undefined;
+        } | undefined;
+        name?: string | undefined;
+        style?: string | undefined;
+        title: string;
+        value?: any;
+    } & {
+        description?: string | undefined;
+    } & {
+        field: {
+            class?: string | undefined;
+            mask?: {
+                class?: string | undefined;
+                content?: any;
+                style?: string | undefined;
+            } | undefined;
+            name?: string | undefined;
+            placeholder?: string | undefined;
+            style?: string | undefined;
+            tag?: {
+                class?: string | undefined;
+            } | undefined;
+            textarea?: boolean | undefined;
+            type?: string | undefined;
+            value?: unknown;
+        } & {
+            description?: string | undefined;
+        } & {
+            required?: boolean | undefined;
+            title?: string | undefined;
+        };
+    }) => import("@esportsplus/template/build/types").Renderable;
+};
+export default _default;

package/build/components/field/optional.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const select_1 = __importDefault(require("./select"));
+const switch_1 = __importDefault(require("./switch"));
+const text_1 = __importDefault(require("./text"));
+const select = (data) => {
+    data.field.content = (0, select_1.default)(Object.assign(data.field || {}, {
+        class: `field--optional ${data?.field?.class || ''}`
+    }));
+    return (0, switch_1.default)(data);
+};
+const text = (data) => {
+    data.field.content = (0, text_1.default)(Object.assign(data.field || {}, {
+        class: `field--optional ${data?.field?.class || ''}`
+    }));
+    return (0, switch_1.default)(data);
+};
+exports.default = { select, text };

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

@@ -0,0 +1,32 @@
+import description from './description';
+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];
+declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
+export default _default;

package/build/components/field/select.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const reactivity_1 = require("@esportsplus/reactivity");
+const template_1 = require("@esportsplus/template");
+const form_1 = __importDefault(require("../../components/form"));
+const scrollbar_1 = __importDefault(require("../../components/scrollbar"));
+const root_1 = __importDefault(require("../../components/root"));
+const description_1 = __importDefault(require("./description"));
+const error_1 = __importDefault(require("./error"));
+const title_1 = __importDefault(require("./title"));
+function parse(keys, selected) {
+    let options = {};
+    for (let key of keys) {
+        options[key] = false;
+    }
+    options[selected] = true;
+    return {
+        options,
+        selected: selected || keys[0]
+    };
+}
+function template(data, state) {
+    let { attributes: a, html: h } = (0, scrollbar_1.default)({
+        fixed: true,
+        style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+    });
+    return (0, template_1.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) => {
+        let key = e?.target?.dataset?.key;
+        if (key === undefined) {
+            return;
+        }
+        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) => (0, template_1.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>
+    `;
+}
+exports.default = (data) => {
+    let state = (0, reactivity_1.reactive)(Object.assign({
+        active: false,
+        error: '',
+        render: false,
+    }, parse(Object.keys(data.options || {}), data.selected)));
+    return (0, template_1.html) `
+        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
+            ${(0, title_1.default)(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_1.default.onclick.add(() => state.active = false);
+        }
+    }}'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onclick='${() => { }}'
+                    onrender='${form_1.default.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>
+
+            ${(0, description_1.default)(data)}
+            ${(0, error_1.default)(state)}
+        </div>
+    `;
+};

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

@@ -0,0 +1,3 @@
+import checkbox from './checkbox';
+declare const _default: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template/build/types").Renderable;
+export default _default;

package/build/components/field/switch.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const checkbox_1 = __importDefault(require("./checkbox"));
+exports.default = (data) => {
+    data.mask = data.mask || {};
+    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
+    return (0, checkbox_1.default)(data);
+};

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

@@ -0,0 +1,21 @@
+import description from './description';
+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];
+declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
+export default _default;

package/build/components/field/text.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const reactivity_1 = require("@esportsplus/reactivity");
+const template_1 = require("@esportsplus/template");
+const form_1 = __importDefault(require("../../components/form"));
+const description_1 = __importDefault(require("./description"));
+const error_1 = __importDefault(require("./error"));
+const title_1 = __importDefault(require("./title"));
+exports.default = (data) => {
+    let state = (0, reactivity_1.reactive)({
+        active: false,
+        error: ''
+    });
+    return (0, template_1.html) `
+        <div
+            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
+            onfocusin='${() => {
+        state.active = true;
+    }}'
+            onfocusout='${() => {
+        state.active = false;
+    }}'
+            style='${data?.style || ''}'
+        >
+            ${(0, title_1.default)(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_1.default.input.attributes(state)}'
+                    type='${data?.type || 'string'}'
+                    ${!data?.textarea && data?.value !== undefined ? (0, template_1.html) `value='${data.value}'` : ''}
+                >
+                ${data?.textarea ? (0, template_1.html) `${data?.value || ''}</textarea>` : ''}
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${(0, description_1.default)(data)}
+            ${(0, error_1.default)(state)}
+        </div>
+    `;
+};

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

@@ -0,0 +1,3 @@
+import text from './text';
+declare const _default: (data: Parameters<typeof text>[0]) => import("@esportsplus/template/build/types").Renderable;
+export default _default;

package/build/components/field/textarea.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const text_1 = __importDefault(require("./text"));
+exports.default = (data) => {
+    data.textarea = true;
+    return (0, text_1.default)(data);
+};

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

@@ -0,0 +1,5 @@
+declare const _default: (data: {
+    required?: boolean;
+    title?: string;
+}) => "" | import("@esportsplus/template/build/types").Renderable;
+export default _default;

package/build/components/field/title.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+const tooltip_1 = __importDefault(require("../../components/tooltip"));
+exports.default = (data) => {
+    if (!data?.title) {
+        return '';
+    }
+    let { attributes } = tooltip_1.default.onhover();
+    return (0, template_1.html) `
+        <div class="field-title --flex-horizontal-space-between --flex-vertical">
+            ${data.title}
+
+            ${data?.required && (0, template_1.html) `
+                <div class="bubble --background-primary --margin-left" ${attributes}>
+                    <span class="tooltip-message tooltip-message--w">Required</span>
+                </div>
+            `}
+        </div>
+    `;
+};

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

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

package/build/components/form/action.js

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

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

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

package/build/components/form/index.js

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

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

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

package/build/components/form/input.js

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

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

@@ -0,0 +1,12 @@
+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").Renderable;
+export default _default;

package/build/components/form/layout.js

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

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

@@ -0,0 +1,12 @@
+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/build/components/form/types.js

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ordinal = exports.abbreviate = void 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);
+};
+exports.abbreviate = abbreviate;
+const ordinal = (number) => {
+    let value = number % 100;
+    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
+};
+exports.ordinal = ordinal;
+exports.default = { abbreviate, ordinal };

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.title = exports.suptitle = exports.subtitle = void 0;
+const subtitle = {
+    class: 'page-subtitle --margin-200 --text-crop-bottom'
+};
+exports.subtitle = subtitle;
+const suptitle = {
+    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
+};
+exports.suptitle = suptitle;
+const title = {
+    class: 'page-title --line-height-200 --margin-400 --text-crop'
+};
+exports.title = title;
+exports.default = { subtitle, suptitle, title };

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

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

package/build/components/root/index.js

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

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

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