@esportsplus/ui 0.18.1 → 0.19.0

package/src/components/tooltip/index.ts

@@ -1,159 +1,7 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
-import { omit, toArray } from '@esportsplus/utilities';
-import { root } from '@esportsplus/ui';
-import template from '~/components/template';
+import menu from './menu';
+import onclick from './onclick';
+import onhover from './onhover';
 import './scss/index.scss';
 
 
-let parent: HTMLElement | null | undefined = null,
-    queue: { fn: VoidFunction, tooltip: HTMLElement }[] = [],
-    running = false,
-    scheduled = false;
-
-
-function frame() {
-    if (running) {
-        return;
-    }
-
-    running = true;
-
-    let item,
-        keep;
-
-    while (item = queue.pop()) {
-        if (parent === item.tooltip) {
-            keep = item;
-            continue;
-        }
-
-        item.fn();
-    }
-
-    if (keep) {
-        queue.push(keep);
-    }
-
-    running = false;
-}
-
-
-const menu = template.factory<
-    Attributes & {
-        options: (Attributes & { content: unknown })[],
-        option?: Attributes,
-        state?: { active: boolean },
-        toggle?: boolean,
-        'tooltip-content': Attributes & { direction?: string }
-    }
->(
-    (attributes, content) => onclick(
-        omit(attributes, ['options', 'option', 'tooltip-content']),
-        html`
-            ${content}
-
-            <div
-                class='tooltip-content ${`tooltip-content--${attributes['tooltip-content']?.direction || 'nw'}`}'
-                ${omit(attributes['tooltip-content'], ['direction'])}
-            >
-                ${attributes.options.map((option) => html`
-                    <div
-                        class='link --width-full'
-                        ${omit(option, ['content'])}
-                        ${attributes.option}
-                    >
-                        ${option.content}
-                    </div>
-                `)}
-            </div>
-        `
-    )
-);
-
-const onclick = template.factory<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
-    (attributes, content) => {
-        let state = attributes.state || reactive({ active: false });
-
-        attributes.class = toArray(attributes.class);
-        attributes.class.push(() => {
-            return state.active && '--active';
-        });
-
-        attributes.onclick = function(this: HTMLElement, e) {
-            let active = true,
-                node = e.target as Node | null;
-
-            if (this === node || (attributes.toggle && this.contains(node))) {
-                active = !state.active;
-            }
-
-            if (parent !== this && !parent?.contains(this)) {
-                parent = this.parentElement?.closest('.tooltip');
-            }
-
-            frame();
-
-            if (parent === this) {
-                parent = null;
-                return;
-            }
-
-            state.active = active;
-
-            if (active) {
-                queue.push({
-                    fn: () => state.active = false,
-                    tooltip: this
-                });
-            }
-
-            if (!scheduled) {
-                root.onclick.push(() => {
-                    frame();
-                    scheduled = false;
-                });
-                scheduled = true;
-            }
-        };
-
-        return html`
-            <div
-                class='tooltip'
-                ${omit(attributes, ['state', 'toggle'])}
-            >
-                ${content}
-            </div>
-        `;
-    }
-);
-
-const onhover = template.factory<Attributes & { state?: { active: boolean } }>(
-    (attributes, content) => {
-        let state = attributes.state || reactive({ active: false });
-
-        attributes.class = toArray(attributes.class);
-        attributes.class.push(() => {
-            return state.active && '--active';
-        });
-
-        attributes.onmouseover = () => {
-            state.active = true;
-        };
-        attributes.onmouseout = () => {
-            state.active = false;
-        };
-
-        return html`
-            <div
-                class='tooltip'
-                ${omit(attributes, ['active', 'state', 'toggle'])}
-            >
-                ${content}
-            </div>
-        `;
-    }
-);
-
-
-export default { menu, onclick, onhover };
+export default { menu, onclick, onhover };

package/src/components/tooltip/menu.ts

@@ -0,0 +1,52 @@
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '~/components/template';
+import onclick from './onclick';
+
+
+type A = Attributes & {
+    options: (Attributes & { content: Renderable<unknown> })[],
+    option?: Attributes,
+    state?: { active: boolean },
+    toggle?: boolean,
+    'tooltip-content': Attributes & { direction?: string }
+};
+
+
+const OMIT = ['options', 'option', 'state', 'toggle', 'tooltip-content'];
+
+const OMIT_OPTION = ['content'];
+
+const OMIT_TOOLTIP_CONTENT = ['direction'];
+
+
+export default template.factory<A>(
+    (attributes, content) => {
+        let options = attributes.options,
+            option = attributes.option,
+            tooltipContent = attributes?.['tooltip-content'],
+            tooltipContentDirection = tooltipContent?.direction || 'nw';
+
+        return onclick(
+            omit(attributes, OMIT),
+            html`
+                ${content}
+
+                <div
+                    class='tooltip-content ${`tooltip-content--${tooltipContentDirection}`}'
+                    ${tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT)}
+                >
+                    ${options.map((o) => html`
+                        <div
+                            class='link --width-full'
+                            ${omit(o, OMIT_OPTION)}
+                            ${option}
+                        >
+                            ${o.content}
+                        </div>
+                    `)}
+                </div>
+            `
+        );
+    }
+);

package/src/components/tooltip/onclick.ts

@@ -0,0 +1,97 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import { root } from '@esportsplus/ui';
+import template from '~/components/template';
+
+
+const OMIT = ['state', 'toggle'];
+
+
+let parent: HTMLElement | null | undefined = null,
+    queue: { fn: VoidFunction, tooltip: HTMLElement }[] = [],
+    running = false,
+    scheduled = false;
+
+
+function frame() {
+    if (running) {
+        return;
+    }
+
+    running = true;
+
+    let item,
+        keep;
+
+    while (item = queue.pop()) {
+        if (parent === item.tooltip) {
+            keep = item;
+            continue;
+        }
+
+        item.fn();
+    }
+
+    if (keep) {
+        queue.push(keep);
+    }
+
+    running = false;
+}
+
+
+export default template.factory<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
+    (attributes, content) => {
+        let state = attributes.state || reactive({ active: false }),
+            toggle = attributes.toggle || false;
+
+        return html`
+            <div
+                class='tooltip'
+                ${omit(attributes, OMIT)}
+                ${{
+                    class: () => state.active && '--active',
+                    onclick: function(e) {
+                        let active = true,
+                            node = e.target as Node | null;
+
+                        if (this === node || (toggle && this.contains(node))) {
+                            active = !state.active;
+                        }
+
+                        if (parent !== this && !parent?.contains(this)) {
+                            parent = this.parentElement?.closest('.tooltip');
+                        }
+
+                        frame();
+
+                        if (parent === this) {
+                            parent = null;
+                            return;
+                        }
+
+                        state.active = active;
+
+                        if (active) {
+                            queue.push({
+                                fn: () => state.active = false,
+                                tooltip: this
+                            });
+                        }
+
+                        if (!scheduled) {
+                            root.onclick.push(() => {
+                                frame();
+                                scheduled = false;
+                            });
+                            scheduled = true;
+                        }
+                    }
+                }}
+            >
+                ${content}
+            </div>
+        `;
+    }
+);

package/src/components/tooltip/onhover.ts

@@ -0,0 +1,35 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '~/components/template';
+
+
+type A = Attributes & { state?: { active: boolean } };
+
+
+const OMIT = ['state'];
+
+
+export default template.factory(
+    (attributes: A, content) => {
+        let state = attributes.state || reactive({ active: false });
+
+        return html`
+            <div
+                class='tooltip'
+                ${omit(attributes, OMIT)}
+                ${{
+                    class: () => state.active && '--active',
+                    onmouseover: () => {
+                        state.active = true;
+                    },
+                    onmouseout: () => {
+                        state.active = false;
+                    }
+                }}
+            >
+                ${content}
+            </div>
+        `;
+    }
+);

package/src/components/typewriter/index.ts

@@ -1,5 +1,6 @@
 import { html } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
@@ -7,49 +8,51 @@ import './scss/index.scss';
 const EMPTY_NODE = html` `;
 
 
-export default (content: string[]) => {
-    let state = reactive({ text: '' });
-
-    return {
-        attributes: {
-            class: 'typewriter',
-            onmount: () => {
-                let character = 0,
-                    i = 0,
-                    isWriting = true,
-                    write = content[i];
-
-                function play() {
-                    setTimeout(() => {
-                        state.text = write.slice(0, character);
-
-                        if (isWriting) {
-                            if (character > write.length) {
-                                isWriting = false;
-                                setTimeout(play, 2000);
-                                return;
-                            }
-                            else {
-                                character++;
-                            }
-                        }
-                        else {
-                            if (character === 0) {
-                                isWriting = true;
-                                write = content[++i] || content[i = 0];
+export default template.factory(
+    function(_, content: string[]) {
+        let state = reactive({ text: '' });
+
+        return html`
+            <div class='typewriter' ${{
+                onconnect: () => {
+                    let character = 0,
+                        i = 0,
+                        isWriting = true,
+                        write = content[i];
+
+                    function play() {
+                        setTimeout(() => {
+                            state.text = write.slice(0, character);
+
+                            if (isWriting) {
+                                if (character > write.length) {
+                                    isWriting = false;
+                                    setTimeout(play, 2000);
+                                    return;
+                                }
+                                else {
+                                    character++;
+                                }
                             }
                             else {
-                                character--;
+                                if (character === 0) {
+                                    isWriting = true;
+                                    write = content[++i] || content[i = 0];
+                                }
+                                else {
+                                    character--;
+                                }
                             }
-                        }
 
-                        play();
-                    }, isWriting ? 64 : 32);
-                }
+                            play();
+                        }, isWriting ? 64 : 32);
+                    }
 
-                play();
-            }
-        },
-        html: () => state.text || EMPTY_NODE
-    };
-};
+                    play();
+                }
+            }}>
+                ${() => state.text || EMPTY_NODE}
+            </div>
+        `;
+    }
+);

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

@@ -1,22 +0,0 @@
-import { Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-type Data = {
-    copyright: Attributes & {
-        brand: string;
-    };
-    footer?: Attributes;
-    nav?: Attributes & {
-        links: {
-            text: string;
-            url: string;
-        }[];
-    };
-    social?: Attributes & {
-        links: {
-            icon: string;
-            url: string;
-        }[];
-    };
-};
-declare const _default: ({ copyright, footer, nav, social }: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/footer/index.js

@@ -1,61 +0,0 @@
-import { html, svg } from '@esportsplus/template';
-import './scss/index.scss';
-import { omit } from '@esportsplus/utilities';
-function copy(data) {
-    return html `
-        <div class='footer-copyright group-item --flex-center'>
-            <div
-                class='text --padding-vertical --padding-300 --text-300'
-                style='--color-default: var(--color-grey-500);'
-                ${omit(data, ['brand'])}
-            >
-                &copy; ${`${new Date().getFullYear()} ${data.brand}, All rights reserved`}
-            </div>
-        </div>
-    `;
-}
-export default ({ copyright, footer, nav, social }) => {
-    return html `
-        <footer class='footer' ${footer}>
-            <div class='container'>
-                <div class='group group--offset-top --flex-center --margin-400'>
-
-                    ${nav
-        ? nav.links.map(({ text, url }) => html `
-                            <div class='group-item'>
-                                <a
-                                    class='link --color-white --padding-vertical-300 --text-300'
-                                    href='${url}'
-                                    style='--color-default: var(--color-grey-500);'
-                                    ${omit(nav, ['links'])}
-                                >
-                                    ${text}
-                                </a>
-                            </div>
-                        `)
-        : copy(copyright)}
-
-                    <div class='footer-break'></div>
-
-                    ${social?.links && social.links.map(({ icon, url }) => html `
-                        <div class='group-item'>
-                            <a
-                                class='link --color-white --padding-0px'
-                                href='${url}'
-                                style='--color-default: var(--color-grey-500);'
-                                ${omit(social, ['links'])}
-                            >
-                                <div class='icon --size-500'>
-                                    ${svg.sprite(icon)}
-                                </div>
-                            </a>
-                        </div>
-                    `)}
-
-                    ${nav && copy(copyright)}
-
-                </div>
-            </div>
-        </footer>
-    `;
-};

package/build/components/footer/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.footer,.footer-break{width:100%}@media (max-width:640px){.footer-copyright:first-child{--width:100%}}@media (min-width:640px){.footer-copyright:first-child{margin-right:auto}}.footer-copyright:first-child+.footer-break{display:none}.footer-copyright:last-child{--width:100%}}
-/*$vite$:1*/

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

@@ -1,10 +0,0 @@
-import response, { Response } from '@esportsplus/action';
-type Action = (data: Payload) => Promise<Errors> | Errors;
-type Errors = {
-    errors: Response<unknown>['errors'];
-};
-type Payload = {
-    input: Record<string, any>;
-    response: typeof response;
-};
-export type { Action, Errors, Payload };

package/build/components/form/types.js

@@ -1 +0,0 @@
-export {};

package/src/components/footer/index.ts

@@ -1,74 +0,0 @@
-import { html, Attributes, svg } from '@esportsplus/template';
-import './scss/index.scss';
-import { omit } from '@esportsplus/utilities';
-
-
-type Data = {
-    copyright: Attributes & { brand: string };
-    footer?: Attributes;
-    nav?: Attributes & { links: { text: string, url: string }[] };
-    social?: Attributes & { links: { icon: string, url: string }[] };
-};
-
-
-function copy(data: Data['copyright']) {
-    return html`
-        <div class='footer-copyright group-item --flex-center'>
-            <div
-                class='text --padding-vertical --padding-300 --text-300'
-                style='--color-default: var(--color-grey-500);'
-                ${omit(data, ['brand'])}
-            >
-                &copy; ${`${new Date().getFullYear()} ${data.brand}, All rights reserved`}
-            </div>
-        </div>
-    `;
-}
-
-
-export default ({ copyright, footer, nav, social }: Data) => {
-    return html`
-        <footer class='footer' ${footer}>
-            <div class='container'>
-                <div class='group group--offset-top --flex-center --margin-400'>
-
-                    ${nav
-                        ? nav.links.map(({ text, url }) => html`
-                            <div class='group-item'>
-                                <a
-                                    class='link --color-white --padding-vertical-300 --text-300'
-                                    href='${url}'
-                                    style='--color-default: var(--color-grey-500);'
-                                    ${omit(nav, ['links'])}
-                                >
-                                    ${text}
-                                </a>
-                            </div>
-                        `)
-                        : copy(copyright)
-                    }
-
-                    <div class='footer-break'></div>
-
-                    ${social?.links && social.links.map(({ icon, url }) => html`
-                        <div class='group-item'>
-                            <a
-                                class='link --color-white --padding-0px'
-                                href='${url}'
-                                style='--color-default: var(--color-grey-500);'
-                                ${omit(social, ['links'])}
-                            >
-                                <div class='icon --size-500'>
-                                    ${svg.sprite(icon)}
-                                </div>
-                            </a>
-                        </div>
-                    `)}
-
-                    ${nav && copy(copyright)}
-
-                </div>
-            </div>
-        </footer>
-    `;
-};

package/src/components/footer/scss/index.scss

@@ -1,26 +0,0 @@
-.footer {
-    &,
-    &-break {
-        width: 100%;
-    }
-
-    &-copyright {
-        &:first-child {
-            @media (max-width: 640px) {
-                --width: 100%;
-            }
-
-            @media (min-width: 640px) {
-                margin-right: auto;
-            }
-
-            + .footer-break {
-                display: none;
-            }
-        }
-
-        &:last-child {
-            --width: 100%;
-        }
-    }
-}

package/src/components/form/types.ts

@@ -1,14 +0,0 @@
-import response, { Response } from '@esportsplus/action';
-
-
-type Action = (data: Payload) => Promise<Errors> | Errors;
-
-type Errors = { errors: Response<unknown>['errors'] };
-
-type Payload = {
-    input: Record<string, any>;
-    response: typeof response;
-};
-
-
-export type { Action, Errors, Payload };