@esportsplus/ui 0.0.121 → 0.1.0

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

@@ -0,0 +1,72 @@
+.ellipsis {
+    &-dot {
+        &:nth-child(1) {
+            animation: ellipsis-dot-one var(--animation-duration) linear infinite;
+        }
+
+        &:nth-child(2) {
+            animation: ellipsis-dot-two var(--animation-duration) linear infinite;
+        }
+
+        &:nth-child(3) {
+            animation: ellipsis-dot-three var(--animation-duration) linear infinite;
+        }
+    }
+}
+
+@keyframes ellipsis-dot-one {
+    0% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    66% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes ellipsis-dot-two {
+    0% {
+        opacity: 0;
+    }
+    21% {
+        opacity: 0;
+    }
+    22% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    66% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes ellipsis-dot-three {
+    0% {
+        opacity: 0;
+    }
+    43% {
+        opacity: 0;
+    }
+    44% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    66% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}

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

@@ -0,0 +1,3 @@
+.ellipsis {
+    --animation-duration: 2s;
+}

package/src/components/export/clipboard.ts

@@ -0,0 +1,12 @@
+export default (value: string) => {
+    let input = document.createElement('INPUT') as HTMLInputElement;
+
+    document.body.appendChild(input);
+
+    input.setAttribute('value', value);
+    input.select();
+
+    document.execCommand('copy');
+
+    document.body.removeChild(input);
+};

package/src/components/export/index.ts

@@ -0,0 +1,5 @@
+import clipboard from './clipboard';
+import json from './json';
+
+
+export default { clipboard, json };

package/src/components/export/json.ts

@@ -0,0 +1,15 @@
+export default (content: any[] | Record<string, any>, name: string) => {
+    let link = document.createElement('a');
+
+    link.download = name + '.json';
+    link.href = window.URL.createObjectURL(new Blob(
+        [ JSON.stringify(content) ],
+        { type: 'application/json' }
+    ));
+
+    document.body.appendChild(link);
+
+    link.click();
+
+    document.body.removeChild(link);
+};

package/src/components/field/checkbox.ts

@@ -0,0 +1,61 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import description from './description';
+
+
+type Data = {
+    class?: string;
+    field?: {
+        content?: any;
+    };
+    mask?: {
+        class?: string;
+        style?: string;
+    };
+    name?: string;
+    style?: string;
+    title: string;
+    value?: any;
+} & Parameters<typeof description>[0];
+
+
+export default (data: Data) => {
+    let state = reactive({
+            active: false
+        });
+
+    return html`
+        <div
+            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
+            onchange='${(e: Event) => {
+                if ((e.target as HTMLInputElement).type !== 'checkbox') {
+                    return;
+                }
+
+                state.active = (e.target as HTMLInputElement)?.checked;
+            }}'
+            style='${data?.style || ''}'
+        >
+            <div class="field-title --flex-horizontal-space-between --flex-vertical">
+                ${data.title}
+
+                <label
+                    class="field-mask ${(data?.mask?.class || '').indexOf('field-mask--switch') === -1 ? 'field-mask--checkbox' : ''} --margin-left --margin-400 ${data?.mask?.class || ''}"
+                    style='${data?.mask?.style || ''}'
+                >
+                    <input
+                        class='field-tag field-tag--hidden'
+                        ${data.name ? `name='${data.name}'` : ''}
+                        type='checkbox'
+                        value='1'
+                        ${(data?.class || '').indexOf('--active') !== -1 || data?.value ? 'checked' : ''}
+                    >
+                </label>
+            </div>
+
+            ${data?.field?.content || ''}
+
+            ${description(data)}
+        </div>
+    `
+};

package/src/components/field/description.ts

@@ -0,0 +1,12 @@
+import { html } from '@esportsplus/template';
+
+
+export default (data: { description?: string }) => {
+    if (!data?.description) {
+        return '';
+    }
+
+    return html`
+        <div class='field-description --margin-top --margin-300'>${data.description}</div>
+    `;
+}

package/src/components/field/error.ts

@@ -0,0 +1,14 @@
+import { html } from '@esportsplus/template';
+
+
+export default (data: { error: string }) => {
+    return () => {
+        if (!data.error) {
+            return '';
+        }
+
+        return html`
+            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
+        `;
+    };
+}

package/src/components/field/file.ts

@@ -0,0 +1,64 @@
+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 = {
+    accept?: string;
+    class?: string;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    placeholder?: string;
+    style?: string;
+    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 || ''} cursor:pointer;'
+            >
+                <input
+                    ${data?.accept ? `accept='${data.accept}'` : ''}
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onrender='${form.input.attributes(state)}'
+                    type='file'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/src/components/field/index.ts

@@ -0,0 +1,10 @@
+import checkbox from './checkbox';
+import file from './file';
+import optional from './optional';
+import select from './select';
+import s from './switch';
+import textarea from './textarea';
+import text from './text';
+
+
+export default { checkbox, file, optional, select, switch: s, textarea, text };

package/src/components/field/optional.ts

@@ -0,0 +1,27 @@
+import sel from './select';
+import s from './switch';
+import tex from './text';
+
+
+const select = (data: Parameters<typeof s>[0] & { field: Parameters<typeof sel>[0] }) => {
+    data.field.content = sel(
+        Object.assign(data.field || {}, {
+            class: `field--optional ${data?.field?.class || ''}`
+        })
+    );
+
+    return s(data);
+};
+
+const text = (data: Parameters<typeof s>[0] & { field: Parameters<typeof tex>[0] }) => {
+    data.field.content = tex(
+        Object.assign(data.field || {}, {
+            class: `field--optional ${data?.field?.class || ''}`
+        })
+    );
+
+    return s(data);
+};
+
+
+export default { select, text };

package/src/components/field/scss/_check.scss

@@ -0,0 +1,225 @@
+@use '/lib';
+@use '/tokens';
+
+@mixin css() {
+    &-mask {
+        &--checkbox,
+        &--radio,
+        &--switch {
+            background: var(--background);
+            border-color: var(--border-color);
+            border-radius: var(--border-radius);
+            border-style: var(--border-style);
+            border-width: var(--border-width);
+            flex: 0 0 var(--width);
+            height: var(--height);
+            position: relative;
+            transition:
+                background var(--transition-duration) ease-in-out,
+                border-color var(--transition-duration) ease-in-out,
+                box-shadow var(--transition-duration) ease-in-out,
+                opacity var(--transition-duration) ease-in-out,
+                transform var(--transition-duration) ease-in-out;
+            width: var(--width);
+
+            &:invalid,
+            &:required {
+                box-shadow: none;
+            }
+
+            &::before {
+                box-shadow: var(--box-shadow);
+                content: '';
+                height: var(--height);
+                opacity: var(--opacity);
+                transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
+                width: var(--width);
+            }
+
+            // Hide HTML Field Element
+            .field-tag {
+                @include lib.position(absolute, 0 null null 0);
+                height: 0px;
+                opacity: 0;
+                pointer-events: none;
+                width: 0px;
+                z-index: 0;
+            }
+        }
+
+        &--checkbox,
+        &--radio {
+            &::before {
+                position: absolute;
+                bottom: 50%;
+                right: 50%;
+            }
+        }
+
+        &--radio,
+        &--switch {
+            &::before {
+                background: var(--accent);
+                border-radius: inherit;
+                transform-origin: center;
+            }
+        }
+
+        &--checkbox {
+            &::before {
+                border-bottom: var(--border-width) solid var(--accent);
+                border-right: var(--border-width) solid var(--accent);
+                transform-origin: center left;
+            }
+        }
+
+        &--switch {
+            &::before {
+                @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
+            }
+        }
+    }
+}
+
+@mixin variables() {
+    label#{&},
+    #{tokens.state(inactive, '.field:not(label)')} &-mask {
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+            --border-color: var(--border-color-hover);
+            --box-shadow: var(--box-shadow-hover);
+            --color: var(--color-hover);
+            --outline-opacity: var(--outline-opacity-hover);
+            --outline-width: var(--outline-width-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --background: var(--background-pressed);
+            --border-color: var(--border-color-pressed);
+            --box-shadow: var(--box-shadow-pressed);
+            --color: var(--color-pressed);
+            --outline-opacity: var(--outline-opacity-pressed);
+            --outline-width: var(--outline-width-pressed);
+        }
+    }
+
+    &-mask {
+        &--checkbox,
+        &--radio,
+        &--switch {
+            --accent: var(--accent-default);
+            --accent-active: var(--accent-default);
+            --accent-default: var(--color-white-400);
+            --accent-hover: var(--accent-default);
+            --accent-pressed: var(--accent-default);
+            --height: var(--size);
+            --opacity: var(--opacity-default);
+            --opacity-active: var(--opacity-default);
+            --opacity-default: 1;
+            --opacity-hover: var(--opacity-default);
+            --opacity-pressed: var(--opacity-default);
+            --rotate: 0deg;
+            --scale: var(--scale-default);
+            --scale-active: var(--scale-default);
+            --scale-default: 1;
+            --scale-hover: var(--scale-default);
+            --scale-pressed: var(--scale-default);
+            --size: var(--size-600);
+            --width-switch: 40px;
+
+            &::before {
+                --translateX: 0px;
+                --translateY: 0px;
+            }
+
+            #{tokens.state(inactive, 'label.field')},
+            #{tokens.state(inactive, '.field:not(label)')} & {
+                @include tokens.state(hover) {
+                    --accent: var(--accent-hover);
+                    --opacity: var(--opacity-hover);
+                    --scale: var(--scale-hover);
+                }
+
+                @include tokens.state(pressed) {
+                    --accent: var(--accent-pressed);
+                    --opacity: var(--opacity-pressed);
+                    --scale: var(--scale-pressed);
+                }
+            }
+
+            #{tokens.state(active, '.field')} & {
+                --accent: var(--accent-active);
+                --opacity: var(--opacity-active);
+                --scale: var(--scale-active);
+            }
+        }
+
+        &--checkbox,
+        &--radio {
+            --margin-horizontal: calc(var(--width-switch) - var(--width));
+            --width: var(--height);
+        }
+
+        &--radio,
+        &--switch {
+            &::before {
+                --box-shadow: 0 1px 0 rgba(0,0,0, 0.16);
+            }
+        }
+
+        &--checkbox {
+            --border-radius: var(--border-radius-300);
+            --rotate: 45deg;
+            --scale-active: 1;
+            --scale-default: 0;
+            --scale-hover: 1.08;
+            --scale-pressed: 0.98;
+
+            &::before {
+                --box-shadow: 1px 1px 0 rgba(0,0,0, 0.16);
+                --border-width: 5px;
+                --height: 110%;
+                --translateX: 108%;
+                --translateY: 8%;
+                --width: 50%;
+
+                #{tokens.state(default, '.field')} & {
+                    --translateY: 100%;
+                }
+            }
+        }
+
+        &--radio {
+            --border-radius: var(--border-radius-circle);
+            --opacity-active: 1;
+            --opacity-default: 0.4;
+            --scale-active: 0.9;
+            --scale-default: 0;
+            --scale-hover: 0.8;
+            --scale-pressed: 0.7;
+
+            &::before {
+                --height: calc((var(--size) / 2) - (var(--border-width) * 2));
+                --translateX: 50%;
+                --translateY: 50%;
+                --width: var(--height);
+            }
+        }
+
+        &--switch {
+            --border-radius: var(--border-radius-curved);
+            --padding-horizontal: var(--border-width-400);
+            --padding-vertical: var(--border-width-400);
+            --width: var(--width-switch);
+
+            &::before {
+                --height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
+                --width: var(--height);
+
+                #{tokens.state(active, '.field')} & {
+                    --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
+                }
+            }
+        }
+    }
+}

package/src/components/field/scss/_normalize.scss

@@ -0,0 +1,36 @@
+@mixin normalize() {
+    button,
+    input,
+    select,
+    textarea {
+        background: transparent;
+        border-radius: 0;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        margin: 0;
+        padding: 0;
+
+        &,
+        &:active,
+        &:focus,
+        &:hover {
+            outline: none;
+        }
+
+        &:invalid {
+            box-shadow: none;
+        }
+    }
+
+    form {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+
+    label {
+        cursor: pointer;
+    }
+}

package/src/components/field/scss/_text.scss

@@ -0,0 +1,106 @@
+@use '/lib';
+
+@mixin css() {
+    &-mask {
+        &--input,
+        &--select {
+            align-items: center;
+            background: var(--background);
+            border: var(--border-width) var(--border-style) var(--border-color);
+            border-radius: var(--border-radius);
+            display: flex;
+            flex-wrap: wrap;
+            font-size: var(--font-size);
+            line-height: var(--line-height);
+            position: relative;
+            width: 100%;
+
+            &:invalid,
+            &:required {
+                box-shadow: none;
+            }
+
+            &,
+            .field-tag {
+                color: var(--color);
+            }
+        }
+
+        // Truncate Overflowing Text
+        &--input .field-tag,
+        &--select .field-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &--input {
+            cursor: text;
+            // Necessary To Maintain Height Of Hidden Password Fields In Floating Modals
+            // - Password Managers Cause Problems When Fields Are Not Using 'display:hidden' On Password Fields
+            min-height: calc((var(--padding-vertical) * 2) + var(--size));
+
+            .field-tag {
+                flex: 1 1 auto;
+                padding: var(--padding-vertical) var(--padding-horizontal);
+                min-width: 0;
+
+                &[type='number'] {
+                    appearance: textfield;
+                }
+            }
+
+            textarea.field-tag {
+                white-space: normal;
+            }
+        }
+
+        &--select {
+            cursor: pointer;
+            padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
+
+            &.--padding {
+                padding-right: calc((var(--padding-horizontal) * 1.5) + var(--arrow-size));
+            }
+        }
+
+        // Down Arrow
+        &-arrow {
+            @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
+            border-color: var(--border-color);
+            border-style: var(--border-style);
+            border-width: 0 var(--border-width) var(--border-width) 0;
+            content: '';
+            height: var(--arrow-size);
+            transform: translateY(50%) rotate(45deg);
+            width: var(--arrow-size);
+        }
+    }
+
+    &-text {
+        padding-right: var(--padding-horizontal);
+    }
+}
+
+@mixin variables() {
+    &-mask {
+        &--input,
+        &--select {
+            --font-size: var(--font-size-400);
+            --line-height: var(--line-height-400);
+        }
+
+        &--input {
+            --size: var(--size-400);
+        }
+
+        &--select {
+            --arrow-spacer: 1px;
+            --arrow-size: 6px;
+        }
+
+        &-arrow {
+            --border-width: var(--border-width-500);
+        }
+    }
+}