@esportsplus/ui 0.0.117 → 0.0.120

package/components/field/file.js

@@ -0,0 +1,50 @@
+"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 || ''} cursor:pointer;'
+            >
+                <input
+                    ${data?.accept ? `accept='${data.accept}'` : ''}
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onrender='${form_1.default.input.attributes(state)}'
+                    type='file'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${(0, description_1.default)(data)}
+            ${(0, error_1.default)(state)}
+        </div>
+    `;
+};

package/components/field/index.d.ts

@@ -0,0 +1,222 @@
+declare const _default: {
+    checkbox: (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;
+    }) => import("@esportsplus/template/build/types").Renderable;
+    file: (data: {
+        accept?: string | undefined;
+        class?: string | undefined;
+        mask?: {
+            class?: string | undefined;
+            content?: any;
+            style?: string | undefined;
+        } | undefined;
+        name?: string | undefined;
+        placeholder?: string | undefined;
+        style?: string | undefined;
+        type?: string | undefined;
+        value?: unknown;
+    } & {
+        description?: string | undefined;
+    } & {
+        required?: boolean | undefined;
+        title?: string | undefined;
+    }) => import("@esportsplus/template/build/types").Renderable;
+    optional: {
+        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;
+    };
+    select: (data: {
+        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;
+    switch: (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;
+    }) => import("@esportsplus/template/build/types").Renderable;
+    textarea: (data: {
+        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;
+    text: (data: {
+        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/components/field/index.js

@@ -0,0 +1,13 @@
+"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"));
+const file_1 = __importDefault(require("./file"));
+const optional_1 = __importDefault(require("./optional"));
+const select_1 = __importDefault(require("./select"));
+const switch_1 = __importDefault(require("./switch"));
+const textarea_1 = __importDefault(require("./textarea"));
+const text_1 = __importDefault(require("./text"));
+exports.default = { checkbox: checkbox_1.default, file: file_1.default, optional: optional_1.default, select: select_1.default, switch: switch_1.default, textarea: textarea_1.default, text: text_1.default };

package/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/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/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/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/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/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/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/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/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/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/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/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>
+    `;
+};