@esportsplus/ui 0.7.16 → 0.8.2

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: 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 }) => 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: 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 }) => 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 type { Action, Errors, Payload };

package/src/components/frame/scss/index.scss

@@ -1,12 +1,12 @@
-.frame {
-    display: none;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    position: relative;
-    width: 100%;
-
-
-    &.--active {
-        display: flex;
-    }
+.frame {
+    display: none;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+
+
+    &.--active {
+        display: flex;
+    }
 }

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%;
+    }
 }

package/src/components/grid/scss/variables.scss

@@ -1,6 +1,6 @@
-.grid {
-    --margin-horizontal: var(--size-400);
-    --margin-vertical: var(--size-400);
-    --max-width: 1fr;
-    --min-width: 200px;
+.grid {
+    --margin-horizontal: var(--size-400);
+    --margin-vertical: var(--size-400);
+    --max-width: 1fr;
+    --min-width: 200px;
 }

package/src/components/group/scss/index.scss

@@ -1,36 +1,36 @@
-.group {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin: 0 calc(var(--margin-horizontal) / -2);
-    position: relative;
-    width: calc(100% + var(--margin-horizontal));
-
-
-    &--offset {
-        @each $direction in 'bottom' 'top' {
-            &-#{$direction} {
-                margin-#{$direction}: calc(var(--margin-vertical) * -1);
-            }
-        }
-    }
-
-    &--scroller {
-        flex-flow: row;
-        margin-bottom: calc(var(--scrollbar-width) * -1);
-        overflow-y: hidden;
-        padding-bottom: var(--scrollbar-width);
-    }
-
-
-    &-item {
-        display: flex;
-        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
-        position: relative;
-        width: var(--width);
-
-        &[class*='--width'] {
-            width: calc(var(--width) - var(--margin-horizontal));
-        }
-    }
-}
+.group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: 0 calc(var(--margin-horizontal) / -2);
+    position: relative;
+    width: calc(100% + var(--margin-horizontal));
+
+
+    &--offset {
+        @each $direction in 'bottom' 'top' {
+            &-#{$direction} {
+                margin-#{$direction}: calc(var(--margin-vertical) * -1);
+            }
+        }
+    }
+
+    &--scroller {
+        flex-flow: row;
+        margin-bottom: calc(var(--scrollbar-width) * -1);
+        overflow-y: hidden;
+        padding-bottom: var(--scrollbar-width);
+    }
+
+
+    &-item {
+        display: flex;
+        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
+        position: relative;
+        width: var(--width);
+
+        &[class*='--width'] {
+            width: calc(var(--width) - var(--margin-horizontal));
+        }
+    }
+}

package/src/components/group/scss/variables.scss

@@ -1,17 +1,17 @@
-.group {
-    --margin-horizontal: var(--size-400);
-    --width: auto;
-
-
-    &.--flex-column {
-        .group-item {
-            --width: 100%;
-        }
-    }
-
-    &--scroller {
-        .group-item {
-            --margin-vertical: 0px;
-        }
-    }
-}
+.group {
+    --margin-horizontal: var(--size-400);
+    --width: auto;
+
+
+    &.--flex-column {
+        .group-item {
+            --width: 100%;
+        }
+    }
+
+    &--scroller {
+        .group-item {
+            --margin-vertical: 0px;
+        }
+    }
+}