@esportsplus/ui 0.8.3 → 0.9.0

package/src/components/form/action.ts

@@ -1,81 +1,80 @@
-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 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, s?: { processing: boolean }) {
+    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) {
+            event.preventDefault();
+
+            if (s) {
+                s.processing = true;
+            }
+
+            let { errors } = await action({
+                    input: parse( new FormData( this ).entries() ),
+                    response
+                });
+
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i],
+                    reactive = input.get( this[path!] );
+
+                if (!reactive) {
+                    continue;
+                }
+
+                reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+            }
+
+            if (s) {
+                s.processing = false;
+            }
+        }
+    };
 };

package/src/components/form/index.ts

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

package/src/components/form/input.ts

@@ -1,15 +1,17 @@
-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 };
+let key = Symbol();
+
+
+const get = (element?: HTMLInputElement | HTMLSelectElement) => {
+    // @ts-ignore
+    return element ? element[key] : undefined;
+};
+
+const onrender = (reactive: { error: string }) => {
+    return (element: HTMLInputElement | HTMLSelectElement) => {
+        // @ts-ignore
+        element[key] = reactive;
+    };
+};
+
+
+export default { get, onrender };

package/src/components/form/types.ts

@@ -1,16 +1,14 @@
-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';
+
+
+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/src/components/frame/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

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/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

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

@@ -1,10 +1,12 @@
-.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%;
-    }
+@use './variables.scss';
+
+.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/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

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

@@ -1,36 +1,38 @@
-.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));
-        }
-    }
-}
+@use './variables.scss';
+
+.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;
+        }
+    }
+}

package/src/components/highlight/index.ts

@@ -1,48 +1,52 @@
-import { reactive } from '@esportsplus/reactivity'
-
-
-let key = Symbol(),
-    observer: IntersectionObserver | null = null;
-
-
-export default (background: string) => {
-    if (observer === null) {
-        observer = new IntersectionObserver((entries) => {
-            let disconnected = 0,
-                n = entries.length;
-
-            for (let i = 0; i < n; i++) {
-                let { isIntersecting, target } = entries[i];
-
-                if (target.isConnected) {
-                    // @ts-ignore
-                    target[key].highlight = +isIntersecting;
-                }
-                else {
-                    disconnected++;
-                    observer!.unobserve(target);
-                }
-            }
-
-            if (n - disconnected === 0) {
-                observer!.disconnect();
-                observer = null;
-            }
-        }, { threshold: 1 });
-    }
-
-    let state = reactive({
-            highlight: 0
-        });
-
-    return {
-        attributes: {
-            class: 'highlight',
-            onrender: function(element: HTMLElement & Record<PropertyKey, unknown>) {
-                element[key] = state;
-                observer!.observe(element);
-            },
-            style: [ `--background: ${background}`, () => `--highlight: ${state.highlight}` ]
-        }
-    };
+import { reactive } from '@esportsplus/reactivity'
+import './scss/index.scss';
+
+
+let key = Symbol(),
+    observer: IntersectionObserver | null = null;
+
+
+export default (background: string) => {
+    if (observer === null) {
+        observer = new IntersectionObserver((entries) => {
+            let disconnected = 0,
+                n = entries.length;
+
+            for (let i = 0; i < n; i++) {
+                let { isIntersecting, target } = entries[i];
+
+                if (target.isConnected) {
+                    // @ts-ignore
+                    target[key].highlight = +isIntersecting;
+                }
+                else {
+                    disconnected++;
+                    observer!.unobserve(target);
+                }
+            }
+
+            if (n - disconnected === 0) {
+                observer!.disconnect();
+                observer = null;
+            }
+        }, { threshold: 1 });
+    }
+
+    let state = reactive({
+            highlight: 0
+        });
+
+    return {
+        attributes: {
+            class: 'highlight',
+            onrender: function(element: HTMLElement & Record<PropertyKey, unknown>) {
+                element[key] = state;
+                observer!.observe(element);
+            },
+            style: [
+                () => `--highlight: ${state.highlight}`,
+                `--background: ${background}`,
+            ]
+        }
+    };
 }

package/src/components/highlight/scss/index.scss

@@ -1,5 +1,7 @@
-.highlight {
-    background: linear-gradient(90deg, var(--background) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
-    background-position: calc((1 - var(--highlight)) * 110%) 0;
-    transition: background-position 0.32s;
+@use './variables.scss';
+
+.highlight {
+    background: linear-gradient(90deg, var(--background) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
+    background-position: calc((1 - var(--highlight)) * 110%) 0;
+    transition: background-position 0.32s;
 }

package/src/components/highlight/scss/variables.scss

@@ -1,4 +1,4 @@
-.highlight {
-    --background: transparent;
-    --highlight: 1;
+.highlight {
+    --background: transparent;
+    --highlight: 1;
 }

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/icon/scss/index.scss

@@ -1,16 +1,18 @@
-.icon {
-    color: var(--color);
-    display: flex;
-    flex: 0 0 var(--width);
-    height: var(--height);
-    position: relative;
-    width: var(--width);
-
-
-    svg {
-        color: currentColor;
-        fill: currentColor;
-        height: 100%;
-        width: 100%;
-    }
-}
+@use './variables.scss';
+
+.icon {
+    color: var(--color);
+    display: flex;
+    flex: 0 0 var(--width);
+    height: var(--height);
+    position: relative;
+    width: var(--width);
+
+
+    svg {
+        color: currentColor;
+        fill: currentColor;
+        height: 100%;
+        width: 100%;
+    }
+}

package/src/components/icon/scss/variables.scss

@@ -1,7 +1,7 @@
-.icon {
-    --color: inherit;
-    --height: var(--size);
-    --margin-horizontal: var(--size-300);
-    --size: var(--size-400);
-    --width: var(--size);
-}
+.icon {
+    --color: inherit;
+    --height: var(--size);
+    --margin-horizontal: var(--size-300);
+    --size: var(--size-400);
+    --width: var(--size);
+}