@esportsplus/ui 0.1.8 → 0.2.2

package/src/components/field/text.ts

@@ -1,68 +1,68 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import form from '~/components/form';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    class?: string;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    placeholder?: string;
-    style?: string;
-    tag?: {
-        class?: string;
-    };
-    textarea?: boolean;
-    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 || ''}'
-            >
-                <${data?.textarea ? 'textarea' : 'input'}
-                    class='field-tag --padding-400 ${data?.tag?.class || ''}'
-                    name='${data?.name || ''}'
-                    placeholder='${data?.placeholder || ''}'
-                    onrender='${form.input.attributes(state)}'
-                    type='${data?.type || 'string'}'
-                    ${!data?.textarea && data?.value !== undefined ? html`value='${data.value}'` : ''}
-                >
-                ${data?.textarea ? html`${data?.value || ''}</textarea>` : ''}
-
-                ${data?.mask?.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import form from '~/components/form';
+import description from './description';
+import error from './error';
+import title from './title';
+
+
+type Data = {
+    class?: string;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    placeholder?: string;
+    style?: string;
+    tag?: {
+        class?: string;
+    };
+    textarea?: boolean;
+    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 || ''}'
+            >
+                <${data?.textarea ? 'textarea' : 'input'}
+                    class='field-tag --padding-400 ${data?.tag?.class || ''}'
+                    name='${data?.name || ''}'
+                    placeholder='${data?.placeholder || ''}'
+                    onrender='${form.input.attributes(state)}'
+                    type='${data?.type || 'string'}'
+                    ${!data?.textarea && data?.value !== undefined ? html`value='${data.value}'` : ''}
+                >
+                ${data?.textarea ? html`${data?.value || ''}</textarea>` : ''}
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/src/components/field/textarea.ts

@@ -1,8 +1,8 @@
-import text from './text';
-
-
-export default (data: Parameters<typeof text>[0]) => {
-    data.textarea = true;
-
-    return text(data);
+import text from './text';
+
+
+export default (data: Parameters<typeof text>[0]) => {
+    data.textarea = true;
+
+    return text(data);
 };

package/src/components/field/title.ts

@@ -1,23 +1,23 @@
-import { html } from '@esportsplus/template';
-import tooltip from '~/components/tooltip';
-
-
-export default (data: { required?: boolean, title?: string }) => {
-    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" ${attributes}>
-                    <span class="tooltip-message tooltip-message--w">Required</span>
-                </div>
-            `}
-        </div>
-    `;
+import { html } from '@esportsplus/template';
+import tooltip from '~/components/tooltip';
+
+
+export default (data: { required?: boolean, title?: string }) => {
+    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" ${attributes}>
+                    <span class="tooltip-message tooltip-message--w">Required</span>
+                </div>
+            `}
+        </div>
+    `;
 }

package/src/components/form/action.ts

@@ -1,68 +1,68 @@
-import { response } from '@esportsplus/action';
-import { Action } from './types';
-import alert from '~/components/alert';
-import input from './input';
-
-
-function parse(input: Record<string, any>) {
-    let data: Record<string, any> = {};
-
-    for (let path in input) {
-        let bucket = data,
-            keys = path.indexOf('.') !== -1 ? path.split('.') : [path];
-
-        for (let i = 0; i < keys.length - 1; i++) {
-            bucket = bucket[keys[i]] = bucket[keys[i]] || {};
-        }
-
-        bucket[ keys[keys.length - 1] ] = input[path];
-    }
-
-    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 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({
-                    alert,
-                    input: parse( Object.fromEntries( 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: Record<string, any>) {
+    let data: Record<string, any> = {};
+
+    for (let path in input) {
+        let bucket = data,
+            keys = path.indexOf('.') !== -1 ? path.split('.') : [path];
+
+        for (let i = 0; i < keys.length - 1; i++) {
+            bucket = bucket[keys[i]] = bucket[keys[i]] || {};
+        }
+
+        bucket[ keys[keys.length - 1] ] = input[path];
+    }
+
+    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 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({
+                    alert,
+                    input: parse( Object.fromEntries( 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/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;
+        }
+    }
+}

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

@@ -1,17 +1,17 @@
-.icon {
-    color: var(--color);
-    display: flex;
-    flex: 0 0 var(--width);
-    height: var(--height);
-    pointer-events: none;
-    position: relative;
-    width: var(--width);
-
-
-    svg {
-        color: currentColor;
-        fill: currentColor;
-        height: 100%;
-        width: 100%;
-    }
-}
+.icon {
+    color: var(--color);
+    display: flex;
+    flex: 0 0 var(--width);
+    height: var(--height);
+    pointer-events: none;
+    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);
+}