@esportsplus/ui 0.0.119 → 0.0.120

package/src/components/field/select.ts

@@ -0,0 +1,151 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import form from '~/components/form';
+import scrollbar from '~/components/scrollbar';
+import root from '~/components/root';
+import description from './description';
+import error from './error';
+import title from './title';
+
+
+type Data = {
+    class?: string;
+    effect?: (selected: number | string) => void;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    options: Record<number | string, number | string>;
+    option?: {
+        class?: string;
+        style?: string;
+    };
+    selected?: any;
+    scrollbar?: {
+        style?: string;
+    };
+    style?: string;
+    text?: {
+        class?: string;
+    };
+    tooltip?: {
+        class?: string;
+        direction?: any;
+        style?: string;
+    };
+} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
+
+
+function parse(keys: (number | string)[], selected: number | string) {
+    let options: Record<string, boolean> = {};
+
+    for (let key of keys) {
+        options[key] = false;
+    }
+
+    options[selected] = true;
+
+    return {
+        options,
+        selected: selected || keys[0]
+    };
+}
+
+function template(data: Data, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
+    let { attributes: a, html: h } = scrollbar({
+            fixed: true,
+            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        });
+
+    return html`
+        <div
+            class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'
+            style='${data?.tooltip?.style || ''}'
+        >
+            <div
+                class='row --flex-column'
+                onclick='${(e: Event) => {
+                    let key = (e?.target as HTMLElement)?.dataset?.key;
+
+                    if (key === undefined) {
+                        return;
+                    }
+
+                    // Swap active
+                    state.options[key] = true;
+                    state.options[state.selected] = false;
+
+                    state.active = false;
+                    state.selected = key;
+
+                    if (data.effect) {
+                        data.effect(key);
+                    }
+                }}'
+                ${a}
+            >
+                ${Object.keys( data.options || {} ).map((key: number | string) => html`
+                    <div
+                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
+                        style='${data?.option?.style || ''}'
+                    >
+                        <span class="--text-truncate">
+                            ${data.options[key]}
+                        </span>
+                    </div>
+                `)}
+            </div>
+
+            ${h}
+        </div>
+    `;
+}
+
+
+export default (data: Data) => {
+    let state = reactive(Object.assign({
+            active: false,
+            error: '',
+            render: false,
+        }, parse(Object.keys( data.options || {} ), data.selected)));
+
+    return html`
+        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
+            ${title(data)}
+
+            <label
+                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
+                onclick='${() => {
+                    state.render = true;
+                    state.active = !state.active;
+
+                    if (state.active) {
+                        root.onclick.add(() => state.active = false);
+                    }
+                }}'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onclick='${() => { /* Prevent double click events from firing */ }}'
+                    onrender='${form.input.attributes(state)}'
+                    value='${() => state.selected}'
+                >
+
+                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
+                    ${() => data.options[ state.selected ] || '-'}
+                </div>
+
+                <div class='field-mask-arrow'></div>
+
+                ${() => state.render ? template(data, state) : ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/src/components/field/switch.ts

@@ -0,0 +1,9 @@
+import checkbox from './checkbox';
+
+
+export default (data: Parameters<typeof checkbox>[0]) => {
+    data.mask = data.mask || {};
+    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
+
+    return checkbox(data);
+};

package/src/components/field/text.ts

@@ -0,0 +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>
+    `;
+};

package/src/components/field/textarea.ts

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

package/src/components/field/title.ts

@@ -0,0 +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>
+    `;
+}

package/src/components/form/action.ts

@@ -0,0 +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');
+        }
+    };
+};

package/src/components/form/index.ts

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

package/src/components/form/input.ts

@@ -0,0 +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;
+};
+
+
+export default { attributes, get };

package/src/components/form/layout.ts

@@ -0,0 +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>
+`;

package/src/components/form/types.ts

@@ -0,0 +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;
+};
+
+
+export { Action, Errors, Payload };

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

@@ -0,0 +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));
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+.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

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

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

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

package/src/components/link/scss/index.scss

@@ -0,0 +1,28 @@
+@use '/tokens';
+
+.link {
+    align-content: center;
+    background: var(--background);
+    color: var(--color);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    justify-content: flex-start;
+    line-height: var(--line-height);
+    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        color var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+    width: var(--width);
+
+
+    &--underline {
+        @include tokens.state(active hover) {
+            text-decoration: underline;
+        }
+    }
+}

package/src/components/link/scss/variables.scss

@@ -0,0 +1,47 @@
+@use '/tokens';
+
+.link {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-default);
+    --border-radius: var(--border-radius-400);
+    --border-width: 0px;
+    --color: var(--color-default);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-500);
+    --line-height: var(--line-height-400);
+    --padding-horizontal: var(--size-400);
+    --padding-vertical: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: auto;
+
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --color: var(--color-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --color: var(--color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+        --border-color: var(--border-color-pressed);
+        --color: var(--color-pressed);
+    }
+}

package/src/components/loading/scss/index.scss

@@ -0,0 +1,24 @@
+.loading {
+    animation: loading var(--animation-duration) infinite linear;
+    animation-delay: var(--animation-delay);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: 100%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    box-shadow: var(--box-shadow);
+    height: var(--height);
+    pointer-events: none;
+    position: relative;
+    transition: border-color var(--transition-duration) ease-in-out;
+    width: var(--width);
+    z-index: 0;
+}
+
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/components/loading/scss/variables.scss

@@ -0,0 +1,31 @@
+.loading {
+    --animation-delay: calc(0s + (0.032s * var(--i)));
+    --animation-duration: calc(0.64s * (var(--i) + 1.5));
+    --border-color: inherit;
+    --border-style: solid;
+    --border-width: var(--border-width-400);
+    --box-shadow: none;
+    --height: calc(var(--size) * var(--multiplier));
+    --i: 0;
+    --multiplier: calc(1 - (.2 * var(--i)));
+    --size: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: calc(var(--size) * var(--multiplier));
+
+    .loading {
+        --i: 1;
+        --size: inherit;
+
+        .loading {
+            --i: 2;
+
+            .loading {
+                --i: 3;
+
+                .loading {
+                    --i: 4;
+                }
+            }
+        }
+    }
+}

package/src/components/modal/scss/index.scss

@@ -0,0 +1,32 @@
+@use '/lib';
+@use '/tokens';
+
+.modal {
+    @include lib.position(fixed, center);
+    max-height: var(--max-height);
+    max-width: var(--max-width);
+    overflow: hidden;
+    transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+    transform-origin: center;
+    width: var(--width);
+    z-index: 2;
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+        pointer-events: none;
+        transform: translate(50%, 50%) scale(0.8);
+
+        input[type='password'] {
+            display: none;
+        }
+    }
+
+    &-frame {
+        transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+        transform-origin: center;
+
+        @include tokens.state(inactive) {
+            display: none;
+        }
+    }
+}

package/src/components/modal/scss/variables.scss

@@ -0,0 +1,10 @@
+.modal {
+    --max-height: calc(100svh - (var(--margin) * 2));
+    --max-width: 320px;
+    --width: calc(100svw - (var(--margin) * 2));
+
+    &,
+    &-frame {
+        --transition-duration: var(--transition-duration-300);
+    }
+}

package/src/components/number/index.ts

@@ -0,0 +1,24 @@
+let formatter: null | Intl.NumberFormat = null,
+    suffixes = ['th', 'st', 'nd', 'rd'];
+
+
+const abbreviate = (number: number) => {
+    if (formatter === null) {
+        formatter = new Intl.NumberFormat('en-GB', {
+            notation: 'compact',
+            compactDisplay: 'short'
+        });
+    }
+
+    return formatter.format(number);
+};
+
+const ordinal = (number: number) => {
+    let value = number % 100;
+
+    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
+};
+
+
+export default { abbreviate, ordinal };
+export { abbreviate, ordinal };