@esportsplus/ui 0.0.67 → 0.0.68

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

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

package/build/components/field/file.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: false,
+        error: ''
+    });
+    return html `
+        <div
+            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
+            onfocusin='${() => {
+        state.active = true;
+    }}'
+            onfocusout='${() => {
+        state.active = false;
+    }}'
+            style='${data?.style || ''}'
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    ${data?.accept ? `accept='${data.accept}'` : ''}
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onrender='${form.input.attributes(state)}'
+                    type='file'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

@@ -19,6 +19,29 @@ declare const _default: {
         type: string;
         values: never[];
     };
+    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;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
     optional: {
         select: (data: {
             class?: string | undefined;

package/build/components/field/index.js

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

package/build/components/field/title.js

@@ -4,12 +4,13 @@ export default (data) => {
     if (!data?.title) {
         return '';
     }
+    let { attributes } = tooltip.onhover();
     return html `
         <div class="field-title --flex-horizontal-space-between --flex-vertical">
             ${data.title}
 
             ${data?.required && html `
-                <div class="bubble --background-primary --margin-left" ${tooltip.onhover()}>
+                <div class="bubble --background-primary --margin-left" ${attributes}>
                     <span class="tooltip-message tooltip-message--w">Required</span>
                 </div>
             `}

package/build/components/form/layout.js

@@ -6,7 +6,7 @@ export default (data) => html `
     <form class='${data?.class}' ${data?.action || ''}>
         ${data?.content || ''}
 
-        ${data?.button ? html `
+        ${data?.button?.content ? html `
             <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
                 ${data?.button?.content || ''}
             </button>

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

@@ -1,40 +1,53 @@
 declare const _default: {
-    onclick: ({ active, toggle }?: {
+    onclick: (data?: {
         active?: boolean | undefined;
-        toggle?: boolean | undefined;
-    }) => {
-        content: string;
-        type: string;
-        values: never[];
-    };
-    onhover: (active?: boolean) => {
-        content: string;
-        type: string;
-        values: never[];
-    };
-    menu: (data: {
-        class?: string | undefined;
-        direction?: string | undefined;
-        items?: {
-            border?: {
+        menu?: {
+            class?: string | undefined;
+            direction?: string | undefined;
+            items?: {
+                border?: {
+                    class?: string | undefined;
+                } | undefined;
                 class?: string | undefined;
+                onclick?: ((...args: any[]) => void) | undefined;
+                style?: string | undefined;
+                svg?: string | undefined;
+                target?: string | undefined;
+                text: string;
+                url?: string | undefined;
+            }[] | undefined;
+            state?: {
+                active?: boolean | undefined;
             } | undefined;
-            class?: string | undefined;
-            onclick?: ((...args: any[]) => void) | undefined;
             style?: string | undefined;
-            svg?: string | undefined;
-            target?: string | undefined;
-            text: string;
-            url?: string | undefined;
-        }[] | undefined;
-        state?: {
-            active?: boolean | undefined;
         } | undefined;
-        style?: string | undefined;
-    }) => () => "" | {
-        content: string;
-        type: string;
-        values: never[];
+        toggle?: boolean | undefined;
+    }) => {
+        attributes: {
+            content: string;
+            type: string;
+            values: never[];
+        };
+        content: (() => "" | {
+            content: string;
+            type: string;
+            values: never[];
+        }) | undefined;
+        state: {
+            active: boolean;
+            render: boolean | undefined;
+        };
+    };
+    onhover: (active?: boolean) => {
+        attributes: {
+            content: string;
+            type: string;
+            values: never[];
+        };
+        state: {
+            active: boolean;
+            render: boolean | undefined;
+        };
     };
 };
 export default _default;

package/build/components/tooltip/index.js

@@ -2,38 +2,52 @@ import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { root } from '../../components';
 import menu from './menu';
-const onclick = ({ active, toggle } = {}) => {
-    let state = reactive({
-        active: active || false
+const onclick = (data = {}) => {
+    let content, state = reactive({
+        active: data.active || false,
+        render: undefined
     });
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onclick: function (e) {
-            let active = true;
-            if (toggle && e.target && this.isSameNode(e.target)) {
-                active = !state.active;
-            }
-            state.active = active;
-            if (active) {
-                root.queue.onclick(() => state.active = false);
+    if (data.menu) {
+        content = menu(data.menu, state);
+    }
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onclick: function (e) {
+                let active = true;
+                if (data.toggle && e.target && this.isSameNode(e.target)) {
+                    active = !state.active;
+                }
+                state.active = active;
+                if (active) {
+                    root.queue.onclick(() => state.active = false);
+                }
             }
-        }
-    });
+        }),
+        content,
+        state
+    };
 };
 const onhover = (active = false) => {
-    let state = reactive({ active });
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onmouseover: () => {
-            state.active = true;
-        },
-        onmouseout: () => {
-            state.active = false;
-        }
+    let state = reactive({
+        active,
+        render: undefined
     });
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onmouseover: () => {
+                state.active = true;
+            },
+            onmouseout: () => {
+                state.active = false;
+            }
+        }),
+        state
+    };
 };
-export default { onclick, onhover, menu };
+export default { onclick, onhover };

package/build/components/tooltip/menu.d.ts

@@ -18,7 +18,10 @@ type Data = {
     };
     style?: string;
 };
-declare const _default: (data: Data) => () => "" | {
+declare const _default: (data: Data, state: {
+    active?: boolean;
+    render?: boolean;
+}) => () => "" | {
     content: string;
     type: string;
     values: never[];

package/build/components/tooltip/menu.js

@@ -1,4 +1,4 @@
-import { effect, reactive } from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 function template(data) {
     return html `
@@ -33,12 +33,9 @@ function template(data) {
         </div>
     `;
 }
-export default (data) => {
-    let state = reactive({
-        render: false
-    });
+export default (data, state) => {
     effect(() => {
-        if (!data?.state?.active || state.render) {
+        if (!state.active || state.render) {
             return;
         }
         state.render = true;

package/package.json

@@ -22,5 +22,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "build/index.d.ts",
-    "version": "0.0.67"
+    "version": "0.0.68"
 }

package/src/components/field/file.ts

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

package/src/components/field/index.ts

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

package/src/components/field/title.ts

@@ -7,12 +7,14 @@ export default (data: { required?: boolean, title?: string }) => {
         return '';
     }
 
+    let { attributes } = tooltip.onhover();
+
     return html`
         <div class="field-title --flex-horizontal-space-between --flex-vertical">
             ${data.title}
 
             ${data?.required && html`
-                <div class="bubble --background-primary --margin-left" ${tooltip.onhover()}>
+                <div class="bubble --background-primary --margin-left" ${attributes}>
                     <span class="tooltip-message tooltip-message--w">Required</span>
                 </div>
             `}

package/src/components/form/layout.ts

@@ -20,7 +20,7 @@ export default (data: Data) => html`
     <form class='${data?.class}' ${data?.action || ''}>
         ${data?.content || ''}
 
-        ${data?.button ? html`
+        ${data?.button?.content ? html`
             <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
                 ${data?.button?.content || ''}
             </button>

package/src/components/tooltip/index.ts

@@ -4,46 +4,62 @@ import { root } from '~/components';
 import menu from './menu';
 
 
-const onclick = ({ active, toggle }: { active?: boolean, toggle?: boolean } = {}) => {
-    let state = reactive({
-            active: active || false
+const onclick = (data: { active?: boolean, menu?: Parameters<typeof menu>[0], toggle?: boolean } = {}) => {
+    let content,
+        state = reactive({
+            active: data.active || false,
+            render: undefined as boolean | undefined
         });
 
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onclick: function(this: HTMLElement, e: Event) {
-            let active = true;
+    if (data.menu) {
+        content = menu(data.menu, state);
+    }
 
-            if (toggle && e.target && this.isSameNode(e.target as Node)) {
-                active = !state.active;
-            }
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onclick: function(this: HTMLElement, e: Event) {
+                let active = true;
 
-            state.active = active;
+                if (data.toggle && e.target && this.isSameNode(e.target as Node)) {
+                    active = !state.active;
+                }
 
-            if (active) {
-                root.queue.onclick(() => state.active = false);
+                state.active = active;
+
+                if (active) {
+                    root.queue.onclick(() => state.active = false);
+                }
             }
-        }
-    });
+        }),
+        content,
+        state
+    };
 };
 
 const onhover = (active: boolean = false) => {
-    let state = reactive({ active });
-
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onmouseover: () => {
-            state.active = true;
-        },
-        onmouseout: () => {
-            state.active = false;
-        }
-    });
+    let state = reactive({
+            active,
+            render: undefined as boolean | undefined
+        });
+
+    return {
+        attributes: html({
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onmouseover: () => {
+                state.active = true;
+            },
+            onmouseout: () => {
+                state.active = false;
+            }
+        }),
+        state
+    };
 };
 
 
-export default { onclick, onhover, menu };
+export default { onclick, onhover };

package/src/components/tooltip/menu.ts

@@ -1,4 +1,4 @@
-import { effect, reactive } from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 
 
@@ -57,13 +57,10 @@ function template(data: Data) {
 }
 
 
-export default (data: Data) => {
-    let state = reactive({
-            render: false
-        });
-
+// TODO: There's nothing binding activate to tooltip menu ( this is never called outside initial effect run )
+export default (data: Data, state: { active?: boolean, render?: boolean }) => {
     effect(() => {
-        if (!data?.state?.active || state.render) {
+        if (!state.active || state.render) {
             return;
         }