@esportsplus/ui 0.5.3 → 0.5.4

package/src/components/counter/scss/variables.scss

@@ -1,27 +1,27 @@
-.counter {
-    // TODO: Switch to clamped font size css variables
-    --font-size: clamp(2rem, 4vw + 1rem, 8rem);
-    --line-height: calc(var(--font-size) * 1.5);
-    --mask-size: 0.24;
-    --timing-function: var(--timing-bounce-out);
-    --transition-duration: 2s;
-
-    &-character {
-        --font-weight: var(--font-weight-400);
-        --scale: 1;
-
-        &--fraction,
-        &--symbol {
-            --opacity: 0.8;
-        }
-
-        &--fraction {
-            --font-weight: var(--font-weight-300);
-            --scale: 0.75;
-        }
-
-        &--symbol:first-child {
-            --scale: 0.8;
-        }
-    }
+.counter {
+    // TODO: Switch to clamped font size css variables
+    --font-size: clamp(2rem, 4vw + 1rem, 8rem);
+    --line-height: calc(var(--font-size) * 1.5);
+    --mask-size: 0.24;
+    --timing-function: var(--timing-bounce-out);
+    --transition-duration: 2s;
+
+    &-character {
+        --font-weight: var(--font-weight-400);
+        --scale: 1;
+
+        &--fraction,
+        &--symbol {
+            --opacity: 0.8;
+        }
+
+        &--fraction {
+            --font-weight: var(--font-weight-300);
+            --scale: 0.75;
+        }
+
+        &--symbol:first-child {
+            --scale: 0.8;
+        }
+    }
 }

package/src/components/ellipsis/index.ts

@@ -1,10 +1,10 @@
-import { html } from '@esportsplus/template';
-
-
-export default (attributes?: Record<string, string>) => html`
-<div class="ellipsis" ${attributes}>
-    <span></span>
-    <span></span>
-    <span></span>
-</div>
+import { html } from '@esportsplus/template';
+
+
+export default (attributes?: Record<string, string>) => html`
+<div class="ellipsis" ${attributes}>
+    <span></span>
+    <span></span>
+    <span></span>
+</div>
 `;

package/src/components/ellipsis/scss/index.scss

@@ -1,28 +1,28 @@
-.ellipsis {
-    span {
-        animation: Ellipsis var(--animation-duration) infinite linear;
-        background-color: var(--color);
-        border-radius: 100%;
-        display: inline-block;
-        height: var(--size);
-        margin: 0 var(--margin-horizontal);
-        width: var(--size);
-
-        :nth-child(2) {
-            animation-delay: 0.24s;
-        }
-
-        :nth-child(3) {
-            animation-delay: 0.48s;
-        }
-    }
-
-    @keyframes Ellipsis {
-        0%, 100% {
-            opacity: 0.16;
-        }
-        20% {
-            opacity: 1;
-        }
-    }
+.ellipsis {
+    span {
+        animation: Ellipsis var(--animation-duration) infinite linear;
+        background-color: var(--color);
+        border-radius: 100%;
+        display: inline-block;
+        height: var(--size);
+        margin: 0 var(--margin-horizontal);
+        width: var(--size);
+
+        :nth-child(2) {
+            animation-delay: 0.24s;
+        }
+
+        :nth-child(3) {
+            animation-delay: 0.48s;
+        }
+    }
+
+    @keyframes Ellipsis {
+        0%, 100% {
+            opacity: 0.16;
+        }
+        20% {
+            opacity: 1;
+        }
+    }
 }

package/src/components/ellipsis/scss/variables.scss

@@ -1,5 +1,5 @@
-.ellipsis {
-    --animation-duration: 1.24s;
-    --marign-horizontal: var(--size-100);
-    --size: var(--size-200);
+.ellipsis {
+    --animation-duration: 1.24s;
+    --marign-horizontal: var(--size-100);
+    --size: var(--size-200);
 }

package/src/components/footer/index.ts

@@ -1,79 +1,79 @@
-import { html, svg } from '@esportsplus/template';
-
-
-type Data = {
-    copyright: {
-        attributes?: Record<string, unknown>;
-        brand: string;
-    };
-    footer?: {
-        attributes: Record<string, unknown>;
-    };
-    nav?: {
-        attributes?: Record<string, unknown>;
-        links: { text: string, url: string }[];
-    };
-    social?: {
-        attributes?: Record<string, unknown>;
-        links: { icon: { symbol: string }, url: string }[]
-    };
-};
-
-
-function copy({ attributes, brand }: 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);' ${attributes}>
-                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
-            </div>
-        </div>
-    `;
-}
-
-
-export default ({ copyright, footer, nav, social }: Data) => {
-    return html`
-        <footer class='footer' ${footer?.attributes}>
-            <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);'
-                                    ${nav.attributes}
-                                >
-                                    ${text}
-                                </a>
-                            </div>
-                        `)
-                        : copy(copyright)
-                    }
-
-                    <div class='footer-break'></div>
-
-                    ${social?.links && social.links.map(({ icon, url }: { icon: { symbol: string }, url: string }) => html`
-                        <div class='group-item'>
-                            <a
-                                class='link --color-white --padding-0px'
-                                href='${url}'
-                                style='--color-default: var(--color-grey-500);'
-                                ${social.attributes}
-                            >
-                                <div class='icon --size-500'>
-                                    ${svg.sprite(icon)}
-                                </div>
-                            </a>
-                        </div>
-                    `)}
-
-                    ${nav && copy(copyright)}
-
-                </div>
-            </div>
-        </footer>
-    `;
+import { html, svg } from '@esportsplus/template';
+
+
+type Data = {
+    copyright: {
+        attributes?: Record<string, unknown>;
+        brand: string;
+    };
+    footer?: {
+        attributes: Record<string, unknown>;
+    };
+    nav?: {
+        attributes?: Record<string, unknown>;
+        links: { text: string, url: string }[];
+    };
+    social?: {
+        attributes?: Record<string, unknown>;
+        links: { icon: { symbol: string }, url: string }[]
+    };
+};
+
+
+function copy({ attributes, brand }: 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);' ${attributes}>
+                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+            </div>
+        </div>
+    `;
+}
+
+
+export default ({ copyright, footer, nav, social }: Data) => {
+    return html`
+        <footer class='footer' ${footer?.attributes}>
+            <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);'
+                                    ${nav.attributes}
+                                >
+                                    ${text}
+                                </a>
+                            </div>
+                        `)
+                        : copy(copyright)
+                    }
+
+                    <div class='footer-break'></div>
+
+                    ${social?.links && social.links.map(({ icon, url }: { icon: { symbol: string }, url: string }) => html`
+                        <div class='group-item'>
+                            <a
+                                class='link --color-white --padding-0px'
+                                href='${url}'
+                                style='--color-default: var(--color-grey-500);'
+                                ${social.attributes}
+                            >
+                                <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 +1,26 @@
-.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%;
-        }
-    }
+.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/action.ts

@@ -1,81 +1,81 @@
-import response from '@esportsplus/action';
-import { Action } from './types';
-// import alert from '~/components/alert';
-import input from './input';
-
-
-function parse(input: ReturnType<FormData['entries']>) {
-    let data: Record<string, any> = {};
-
-    for (let [path, value] of input) {
-        let bucket = data,
-            segments = path.indexOf('.') !== -1 ? path.split('.') : [path];
-
-        for (let i = 0; i < segments.length - 1; i++) {
-            bucket = bucket[ segments[i] ] = bucket[ segments[i] ] || {};
-        }
-
-        let key = segments.at(-1)!;
-
-        if (path.endsWith('[]')) {
-            if (typeof value === 'string' && value.trim() === '') {
-                continue;
-            }
-
-            bucket = bucket[ key.substring(0, key.length - 2) ] ??= [];
-            bucket.push(value);
-        }
-        else {
-            bucket[key] = value;
-        }
-    }
-
-    return data;
-};
-
-
-export default function(action: Action) {
-    return {
-        onclick: function(this: HTMLFormElement, event: Event) {
-            let trigger = event.target as HTMLButtonElement;
-
-            if (trigger?.type !== 'submit') {
-                return;
-            }
-
-            // On initial page load both events will be dispatched without preventDefault
-            event.preventDefault();
-
-            this.dispatchEvent(
-                new SubmitEvent('submit', { cancelable: true, bubbles:true, submitter: trigger })
-            );
-        },
-        onsubmit: async function(this: HTMLFormElement, event: SubmitEvent) {
-            // TODO: Figure out button--processing
-             // - Could pass reactive value above and tie it to form layout handler
-            event.preventDefault();
-            event?.submitter?.classList.add('button--processing');
-
-            let { errors } = await action({
-                    // @ts-ignore
-                    alert: null,
-                    input: parse( new FormData( this ).entries() ),
-                    response
-                });
-
-            for (let i = 0, n = errors.length; i < n; i++) {
-                let { message, path } = errors[i],
-                    state = input.get( this[path!] );
-
-                if (!state) {
-                    continue;
-                }
-
-                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
-            }
-
-            // TODO: replace with signal
-            event?.submitter?.classList.remove('button--processing');
-        }
-    };
+import response from '@esportsplus/action';
+import { Action } from './types';
+// import alert from '~/components/alert';
+import input from './input';
+
+
+function parse(input: ReturnType<FormData['entries']>) {
+    let data: Record<string, any> = {};
+
+    for (let [path, value] of input) {
+        let bucket = data,
+            segments = path.indexOf('.') !== -1 ? path.split('.') : [path];
+
+        for (let i = 0; i < segments.length - 1; i++) {
+            bucket = bucket[ segments[i] ] = bucket[ segments[i] ] || {};
+        }
+
+        let key = segments.at(-1)!;
+
+        if (path.endsWith('[]')) {
+            if (typeof value === 'string' && value.trim() === '') {
+                continue;
+            }
+
+            bucket = bucket[ key.substring(0, key.length - 2) ] ??= [];
+            bucket.push(value);
+        }
+        else {
+            bucket[key] = value;
+        }
+    }
+
+    return data;
+};
+
+
+export default function(action: Action) {
+    return {
+        onclick: function(this: HTMLFormElement, event: Event) {
+            let trigger = event.target as HTMLButtonElement;
+
+            if (trigger?.type !== 'submit') {
+                return;
+            }
+
+            // On initial page load both events will be dispatched without preventDefault
+            event.preventDefault();
+
+            this.dispatchEvent(
+                new SubmitEvent('submit', { cancelable: true, bubbles:true, submitter: trigger })
+            );
+        },
+        onsubmit: async function(this: HTMLFormElement, event: SubmitEvent) {
+            // TODO: Figure out button--processing
+             // - Could pass reactive value above and tie it to form layout handler
+            event.preventDefault();
+            event?.submitter?.classList.add('button--processing');
+
+            let { errors } = await action({
+                    // @ts-ignore
+                    alert: null,
+                    input: parse( new FormData( this ).entries() ),
+                    response
+                });
+
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i],
+                    state = input.get( this[path!] );
+
+                if (!state) {
+                    continue;
+                }
+
+                state.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+            }
+
+            // TODO: replace with signal
+            event?.submitter?.classList.remove('button--processing');
+        }
+    };
 };

package/src/components/form/index.ts

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

package/src/components/form/input.ts

@@ -1,15 +1,15 @@
-let cache = new WeakMap<HTMLInputElement | HTMLSelectElement, { error: string }>();
-
-
-const attributes = (reactive: { error: string }) => {
-    return (element: HTMLInputElement | HTMLSelectElement) => {
-        cache.set(element, reactive);
-    };
-};
-
-const get = (element?: HTMLInputElement | HTMLSelectElement) => {
-    return element ? cache.get(element) : undefined;
-};
-
-
+let cache = new WeakMap<HTMLInputElement | HTMLSelectElement, { error: string }>();
+
+
+const attributes = (reactive: { error: string }) => {
+    return (element: HTMLInputElement | HTMLSelectElement) => {
+        cache.set(element, reactive);
+    };
+};
+
+const get = (element?: HTMLInputElement | HTMLSelectElement) => {
+    return element ? cache.get(element) : undefined;
+};
+
+
 export default { attributes, get };

package/src/components/form/layout.ts

@@ -1,26 +1,26 @@
-import { html } from '@esportsplus/template';
-
-
-type Data = {
-    action?: any;
-    button?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    class?: string;
-    content?: any;
-};
-
-
-export default (data: Data) => html`
-    <form class='${data?.class}' ${data?.action || ''}>
-        ${data?.content || ''}
-
-        ${data?.button?.content ? html`
-            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
-                ${data?.button?.content || ''}
-            </button>
-        ` : ''}
-    </form>
+import { html } from '@esportsplus/template';
+
+
+type Data = {
+    action?: any;
+    button?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    class?: string;
+    content?: any;
+};
+
+
+export default (data: Data) => html`
+    <form class='${data?.class}' ${data?.action || ''}>
+        ${data?.content || ''}
+
+        ${data?.button?.content ? html`
+            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
+                ${data?.button?.content || ''}
+            </button>
+        ` : ''}
+    </form>
 `;

package/src/components/form/types.ts

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

package/src/components/grid/scss/index.scss

@@ -1,10 +1,10 @@
-.grid {
-    display: grid;
-    grid-gap: var(--margin-horizontal) var(--margin-vertical);
-    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), var(--max-width)));
-    position: relative;
-
-    .grid-item {
-        width: 100%;
-    }
+.grid {
+    display: grid;
+    grid-gap: var(--margin-horizontal) var(--margin-vertical);
+    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), var(--max-width)));
+    position: relative;
+
+    .grid-item {
+        width: 100%;
+    }
 }