@esportsplus/ui 0.0.20 → 0.0.22

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

@@ -0,0 +1,8 @@
+declare const _default: (data: {
+    description?: string;
+}) => "" | {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/description.js

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

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

@@ -0,0 +1,8 @@
+declare const _default: (data: {
+    error: string;
+}) => () => "" | {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/error.js

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

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

@@ -0,0 +1,66 @@
+import select from './select';
+import text from './text';
+declare const _default: {
+    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;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
+    text: (data: {
+        active?: boolean | 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;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
+};
+export default _default;
+export { select, text };

package/build/components/field/index.js

@@ -0,0 +1,4 @@
+import select from './select';
+import text from './text';
+export default { select, text };
+export { select, text };

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

@@ -0,0 +1,36 @@
+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) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/select.js

@@ -0,0 +1,101 @@
+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';
+function options(keys, selected) {
+    let options = {};
+    for (let key of keys) {
+        options[key] = false;
+    }
+    options[selected] = true;
+    return options;
+}
+export default (data) => {
+    let { attributes: a, html: h } = scrollbar({
+        fixed: true,
+        style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+    }), state = reactive({
+        active: false,
+        error: '',
+        options: options(Object.keys(data.options || {}), data.selected),
+        render: false,
+        selected: 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.queue.onclick(() => state.active = false);
+        }
+    }}'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onclick='${() => { }}'
+                    value='${() => state.selected}'
+                    ${form.input.attributes(state)}
+                >
+
+                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
+                    ${() => data.options[state.selected] || '-'}
+                </div>
+
+                <div class='field-mask-arrow'></div>
+
+                ${() => {
+        if (!state.render) {
+            return '';
+        }
+        return html `
+                        <div class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'>
+                            <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);
+            }
+        }}'
+                                style='${data?.tooltip?.style || ''}'
+                                ${a}
+                            >
+                                ${Object.keys(state.options).map((key) => 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>
+                    `;
+    }}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

@@ -0,0 +1,22 @@
+import description from './description';
+import title from './title';
+type Data = {
+    active?: boolean;
+    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) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/text.js

@@ -0,0 +1,45 @@
+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';
+export default (data) => {
+    let state = reactive({
+        active: (data?.active || false),
+        error: ''
+    });
+    return html `
+        <div
+            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
+            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 || ''}'
+            >
+                <input
+                    class='field-tag --padding-400'
+                    name='${data?.name || ''}'
+                    placeholder='${data?.placeholder || ''}'
+                    type='${data?.type || 'string'}'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                    ${form.input.attributes(state)}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

@@ -0,0 +1,9 @@
+declare const _default: (data: {
+    required?: boolean;
+    title?: string;
+}) => "" | {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/title.js

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

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

@@ -1,5 +1,5 @@
-import { Action, Reactive } from './types';
-export default function (action: Action, reactive?: Reactive): {
+import { Action } from './types';
+export default function (action: Action): {
     content: string;
     type: string;
     values: never[];

package/build/components/form/action.js

@@ -1,6 +1,7 @@
 import { response } from '@esportsplus/action';
 import { html } from '@esportsplus/template';
 import alert from '../../components/alert';
+import input from './input';
 function parse(input) {
     let data = {};
     for (let path in input) {
@@ -13,7 +14,7 @@ function parse(input) {
     return data;
 }
 ;
-export default function (action, reactive = {}) {
+export default function (action) {
     return html({
         onclick: function (event) {
             let trigger = event.target;
@@ -42,13 +43,12 @@ export default function (action, reactive = {}) {
                 },
                 response
             });
-            if (errors && 'errors' in reactive) {
-                let messages = {};
-                for (let i = 0, n = errors.length; i < n; i++) {
-                    let { message, path } = errors[i];
-                    messages[path] = `${message[0].toUpperCase()}${message.substring(1)}`;
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i], state = input.get(this[path]);
+                if (!state) {
+                    continue;
                 }
-                reactive.errors = messages;
+                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
             }
         }
     });

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

@@ -1,6 +1,14 @@
 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?: {

package/build/components/form/index.js

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

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,10 @@
+let cache = new WeakMap();
+const attributes = (reactive) => {
+    return (element) => {
+        cache.set(element, reactive);
+    };
+};
+const get = (element) => {
+    return element ? cache.get(element) : undefined;
+};
+export default { attributes, get };

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

@@ -8,8 +8,8 @@ type Data = {
     };
     class?: string;
     content?: any;
-};
-declare const _default: (data: Data & Parameters<typeof header>[0]) => {
+} & Parameters<typeof header>[0];
+declare const _default: (data: Data) => {
     content: string;
     type: string;
     values: never[];

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

@@ -2,7 +2,7 @@ import { response, Response } from '@esportsplus/action';
 import alert from '../../components/alert';
 type Action = (data: Payload) => Promise<Errors> | Errors;
 type Errors = {
-    errors?: Response<unknown>['errors'];
+    errors: Response<unknown>['errors'];
 };
 type Payload = {
     alert: typeof alert;
@@ -13,7 +13,4 @@ type Payload = {
         start: VoidFunction;
     };
 };
-type Reactive = {
-    errors?: Record<string, string>;
-};
-export { Action, Errors, Payload, Reactive };
+export { Action, Errors, Payload };

package/build/components/index.d.ts

@@ -1,7 +1,9 @@
 export { default as alert } from './alert';
+export { default as field } from './field';
 export { default as form } from './form';
+export { default as overlay } from './overlay';
 export { default as page } from './page';
 export { default as root } from './root';
 export { default as scrollbar } from './scrollbar';
-export { default as state } from './state';
+export { default as site } from './site';
 export { default as tooltip } from './tooltip';

package/build/components/index.js

@@ -1,7 +1,9 @@
 export { default as alert } from './alert';
+export { default as field } from './field';
 export { default as form } from './form';
+export { default as overlay } from './overlay';
 export { default as page } from './page';
 export { default as root } from './root';
 export { default as scrollbar } from './scrollbar';
-export { default as state } from './state';
+export { default as site } from './site';
 export { default as tooltip } from './tooltip';

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

@@ -0,0 +1,10 @@
+type Data = {
+    class?: string;
+    content?: any;
+};
+declare const _default: (data?: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/overlay/index.js

@@ -0,0 +1,6 @@
+import { html } from '@esportsplus/template';
+export default (data = {}) => html `
+    <section class='overlay ${data?.class || ''}'>
+        ${data?.content || ''}
+    </section>
+`;

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

@@ -1,9 +1,8 @@
-type Data = {
+declare const _default: (data: {
     subtitle?: string;
     suptitle?: string;
     title?: string;
-};
-declare const _default: ({ subtitle, suptitle, title }: Data) => {
+}) => {
     content: string;
     type: string;
     values: never[];

package/build/components/page/header.js

@@ -1,20 +1,20 @@
 import { html } from '@esportsplus/template';
-export default ({ subtitle, suptitle, title }) => html `
-    ${suptitle ? html `
+export default (data) => html `
+    ${data?.suptitle ? html `
         <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
-            ${suptitle}
+            ${data?.suptitle}
         </span>
     ` : ''}
 
-    ${title ? html `
-        <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
-            ${title}
+    ${data?.title ? html `
+        <h1 class="page-title --line-height-200 --margin-300 ${!data?.subtitle && '--text-crop-bottom'} ${data?.suptitle ? '--margin-top' : '--text-crop-top'}">
+            ${data?.title}
         </h1>
     ` : ''}
 
-    ${subtitle ? html `
+    ${data?.subtitle ? html `
         <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
-            ${subtitle}
+            ${data?.subtitle}
         </span>
     ` : ''}
 `;

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

@@ -1,7 +1,7 @@
 import header from './header';
 import layout from './layout';
 declare const _default: {
-    header: ({ subtitle, suptitle, title }: {
+    header: (data: {
         subtitle?: string | undefined;
         suptitle?: string | undefined;
         title?: string | undefined;

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

@@ -1,8 +1,7 @@
-type Data = {
+declare const _default: (data?: {
     class?: string;
     content?: any;
-};
-declare const _default: (data?: Data) => {
+}) => {
     content: string;
     type: string;
     values: never[];

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

@@ -1,26 +1,8 @@
-import layout from './layout';
 import queue from './queue';
 declare const _default: {
-    layout: (data?: {
-        overlay?: {
-            class?: string | undefined;
-            content?: any;
-        } | undefined;
-        site?: {
-            class?: string | undefined;
-            content?: any;
-            scrollbar?: {
-                style?: string | undefined;
-            } | undefined;
-        } | undefined;
-    }) => {
-        content: string;
-        type: string;
-        values: never[];
-    };
     queue: {
         onclick: (fn: VoidFunction) => void;
     };
 };
 export default _default;
-export { layout, queue };
+export { queue };

package/build/components/root/index.js

@@ -1,4 +1,3 @@
-import layout from './layout';
 import queue from './queue';
-export default { layout, queue };
-export { layout, queue };
+export default { queue };
+export { queue };

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

@@ -0,0 +1,13 @@
+type Data = {
+    class?: string;
+    content?: any;
+    scrollbar?: {
+        style?: string;
+    };
+};
+declare const _default: (data: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/site/index.js

@@ -0,0 +1,14 @@
+import { html } from '@esportsplus/template';
+import { scrollbar } from '../../components';
+export default (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 || ''}' ${a}>
+            ${data?.content || ''}
+            ${h}
+        </section>
+    `;
+};