@esportsplus/ui 0.0.121 → 0.1.0

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

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

@@ -0,0 +1,10 @@
+declare function deactivate(): void;
+declare const _default: {
+    deactivate: typeof deactivate;
+    error: (messages: string | string[], seconds?: number) => void;
+    html: () => () => "" | import("@esportsplus/template/build/types").Renderable;
+    info: (messages: string | string[], seconds?: number) => void;
+    success: (messages: string | string[], seconds?: number) => void;
+    types: readonly ["error", "info", "success"];
+};
+export default _default;

package/build/components/alert/index.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const reactivity_1 = require("@esportsplus/reactivity");
+const template_1 = require("@esportsplus/template");
+let modifiers = {
+    error: 'red',
+    info: 'black',
+    success: 'green'
+}, state = (0, reactivity_1.reactive)({
+    active: false,
+    messages: new Set,
+    seconds: 0,
+    state: 'activating',
+    type: ''
+}), timeout = 250;
+function activate(key, messages, seconds = 0) {
+    if (!Array.isArray(messages)) {
+        messages = [messages];
+    }
+    if (!messages.length) {
+        return;
+    }
+    if (state.type !== key) {
+        state.messages.clear();
+    }
+    else {
+        state.type = '';
+    }
+    for (let message of messages) {
+        state.messages.add(message);
+    }
+    state.state = 'activating';
+    state.type = key;
+    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, seconds = 0) => activate('error', messages, seconds);
+const info = (messages, seconds = 0) => activate('info', messages, seconds);
+const success = (messages, seconds = 0) => activate('success', messages, seconds);
+const h = () => {
+    return () => state.active ? (0, template_1.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">
+                        ${template_1.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) => (0, template_1.html) `
+                                <p class='--margin-top --margin-border-width-500'>${message}</p>
+                            `)}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    ` : '';
+};
+const types = ['error', 'info', 'success'];
+exports.default = { deactivate, error, html: h, info, success, types };

package/build/components/export/clipboard.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (value: string) => void;
+export default _default;

package/build/components/export/clipboard.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = (value) => {
+    let input = document.createElement('INPUT');
+    document.body.appendChild(input);
+    input.setAttribute('value', value);
+    input.select();
+    document.execCommand('copy');
+    document.body.removeChild(input);
+};

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

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

package/build/components/export/index.js

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

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

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

package/build/components/export/json.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/field/checkbox.d.ts

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

package/build/components/field/checkbox.js

@@ -0,0 +1,46 @@
+"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 description_1 = __importDefault(require("./description"));
+exports.default = (data) => {
+    let state = (0, reactivity_1.reactive)({
+        active: false
+    });
+    return (0, template_1.html) `
+        <div
+            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
+            onchange='${(e) => {
+        if (e.target.type !== 'checkbox') {
+            return;
+        }
+        state.active = e.target?.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 || ''}
+
+            ${(0, description_1.default)(data)}
+        </div>
+    `;
+};

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

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

package/build/components/field/description.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+exports.default = (data) => {
+    if (!data?.description) {
+        return '';
+    }
+    return (0, template_1.html) `
+        <div class='field-description --margin-top --margin-300'>${data.description}</div>
+    `;
+};

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

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

package/build/components/field/error.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("@esportsplus/template");
+exports.default = (data) => {
+    return () => {
+        if (!data.error) {
+            return '';
+        }
+        return (0, template_1.html) `
+            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
+        `;
+    };
+};

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

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

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