@esportsplus/ui 0.53.0 → 0.55.0

package/src/components/button/index.ts

@@ -1,53 +0,0 @@
-import { component, html, type Renderable } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import './scss/index.scss';
-
-
-const hold = component(
-    function(attributes, content: (state: { holding: boolean, complete: boolean }) => Renderable<any>) {
-        let end = () => {
-                if (!state.complete) {
-                    state.holding = false;
-                }
-            },
-            state = reactive({
-                complete: false,
-                holding: false
-            });
-
-        return html`
-            <div
-                class='button ${() => state.holding && 'button--holding'}'
-                onmousedown='${(e) => {
-                    e.preventDefault();
-                    state.holding = true;
-                }}'
-                ${attributes}
-                ${{
-                    onanimationend: (e: AnimationEvent) => {
-                        if (e.animationName === 'buttonHolding') {
-                            state.complete = true;
-                        }
-                    },
-                    onclick: () => {},
-                    onmousedown: (e) => {
-                        e.preventDefault();
-                        state.holding = true;
-                    },
-                    onmouseup: end,
-                    ontouchend: end,
-                    ontouchstart: (e) => {
-                        e.preventDefault();
-                        state.holding = true;
-                    }
-                }}
-            >
-                ${() => content(state)}
-            </div>
-        `;
-    }
-);
-
-
-export default { hold };
-export { hold };

package/src/components/ellipsis/index.ts

@@ -1,11 +0,0 @@
-import { html, Attributes } from '@esportsplus/template';
-import './scss/index.scss';
-
-
-export default (attributes?: Attributes) => html`
-    <div class='ellipsis' ${attributes}>
-        <span></span>
-        <span></span>
-        <span></span>
-    </div>
-`;

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

@@ -1,30 +0,0 @@
-@use 'variables';
-
-.ellipsis {
-    span {
-        animation: ellipsis var(--animation-duration) infinite linear;
-        background-color: var(--color);
-        border-radius: 100%;
-        display: inline-block;
-        height: var(--size);
-        margin: 0 var(--margin-horizontal);
-        width: var(--size);
-
-        :nth-child(2) {
-            animation-delay: 0.24s;
-        }
-
-        :nth-child(3) {
-            animation-delay: 0.48s;
-        }
-    }
-
-    @keyframes ellipsis {
-        0%, 100% {
-            opacity: 0.16;
-        }
-        20% {
-            opacity: 1;
-        }
-    }
-}

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

@@ -1,5 +0,0 @@
-.ellipsis {
-    --animation-duration: 1.24s;
-    --margin-horizontal: var(--size-100);
-    --size: var(--size-200);
-}

package/src/components/frame/index.ts

@@ -1,13 +0,0 @@
-import { component, html } from '@esportsplus/template';
-import './scss/index.scss';
-
-
-export default component(
-    function(this, attributes, content) {
-        return html`
-            <div class='frame --scrollbar' ${this?.attributes} ${attributes}>
-                ${content}
-            </div>
-        `;
-    }
-);

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

@@ -1,39 +0,0 @@
-@use '/tokens';
-@use 'variables';
-
-.frames {
-    display: flex;
-    gap: var(--gap);
-    transform: translateX(calc(var(--i) * (100% + var(--gap))));
-    transition: transform 0.3s ease;
-
-    .frame {
-        flex-shrink: 0;
-        min-width: 100%;
-        width: 100%;
-
-        @include tokens.state(inactive) {
-            display: flex;
-            opacity: var(--opacity);
-
-            > * {
-                pointer-events: none;
-            }
-        }
-    }
-}
-
-.frame {
-    cursor: default;
-    display: none;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    max-width: 100%;
-    position: relative;
-    width: 100%;
-
-
-    @include tokens.state(active) {
-        display: flex;
-    }
-}

package/src/components/frame/scss/variables.scss

@@ -1,4 +0,0 @@
-.frames {
-    --gap: var(--size-400);
-    --opacity: 0.4;
-}

package/src/components/highlight/index.ts

@@ -1,66 +0,0 @@
-import { component, html, Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
-import './scss/index.scss';
-
-
-type A = Attributes & { background?: string };
-
-
-const OMIT = ['background'];
-
-
-let key = Symbol(),
-    observer: IntersectionObserver | null = null;
-
-
-export default component(
-    (attributes: A, content) => {
-        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 html`
-            <div class='highlight'
-                ${omit(attributes, OMIT)}
-                ${{
-                    onrender: (element) => {
-                        element[key] = state;
-                        observer!.observe(element);
-                    },
-                    style: [
-                        () => `--highlight: ${state.highlight}`,
-                        `--background: ${attributes.background}`,
-                    ]
-                }}
-            >
-                ${content}
-            </div>
-        `;
-    }
-);

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

@@ -1,7 +0,0 @@
-@use 'variables';
-
-.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 +0,0 @@
-.highlight {
-    --background: transparent;
-    --highlight: 1;
-}

package/src/components/loader/index.ts

@@ -1,80 +0,0 @@
-import { component, html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
-import './scss/index.scss';
-
-
-type A = Attributes & {
-    'loader'?: Attributes,
-    'loader-content'?: Attributes,
-    'loader-logo'?: Attributes
-};
-
-
-const OMIT = ['loader-content', 'loader-logo'];
-
-
-export default component(
-    (attributes: A, content) => {
-        let state = reactive({
-                load: false,
-                remove: false,
-                scale: false
-            });
-
-        return () => {
-            if (state.remove) {
-                return;
-            }
-
-            let i = 0;
-
-            return html`
-                <div
-                    class='loader ${() => state.load && 'loader--load'}'
-                    onanimationend=${({ animationName: name }: AnimationEvent) => {
-                        i++;
-
-                        if (name === 'move' && i > 1) {
-                            state.remove = true;
-                        }
-                    }}
-                    ${omit(attributes, OMIT)}
-                >
-                    <div
-                        class='loader ${() => state.load && 'loader--load'}'
-                        ${!content && {
-                            onconnect: () => {
-                                state.load = true;
-                            }
-                        }}
-                        ${attributes.loader}
-                    >
-                        ${content && html`
-                            <div class='loader-content' ${attributes['loader-content']}>
-                                <div
-                                    class='loader-logo text --flex-center --text-uppercase --text-600'
-                                    style='color: var(--color-grey-500);'
-                                    ${attributes['loader-logo']}
-                                    ${{
-                                        class: () => state.scale && 'loader-logo--scale',
-                                        onanimationend: ({ animationName: name }) => {
-                                            if (name === 'scale') {
-                                                state.load = true;
-                                            }
-                                        },
-                                        onconnect: () => {
-                                            state.scale = true;
-                                        }
-                                    }}
-                                >
-                                    ${content}
-                                </div>
-                            </div>
-                        `}
-                    </div>
-                </div>
-            `;
-        }
-    }
-);

package/src/components/loader/scss/index.scss

@@ -1,71 +0,0 @@
-@use 'variables';
-
-.loader {
-    background-color: #01020964;
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    opacity: 1;
-    pointer-events: none;
-    right: 0;
-    top: 0;
-    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-    visibility: visible;
-    z-index: 9999;
-
-
-    &--load {
-        animation: 0.4s 0.2s ease-in-out 1 both loaderMove;
-
-        & & {
-            animation: 0.4s ease-in-out 1 both loaderMove;
-        }
-    }
-
-
-    @keyframes loaderMove {
-        0% {
-            transform: translateY(0);
-        }
-        80% {
-            transform: translateY(-102%);
-        }
-        100% {
-            transform: translateY(-102%);
-        }
-    }
-
-
-    & & {
-        background-color: var(--color-black-400);
-    }
-
-    &-content {
-        bottom: auto;
-        left: 50%;
-        position: absolute;
-        right: auto;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-    }
-
-    &-logo {
-        color: white;
-
-        &--scale {
-            animation: loaderLogoScale 0.32s 1;
-            animation-fill-mode: both;
-
-            @keyframes loaderLogoScale {
-                from {
-                    opacity: 1;
-                    transform: scale3d(1, 1, 1);
-                }
-                to {
-                    opacity: 0;
-                    transform: scale3d(1.8, 1.8, 1.8);
-                }
-            }
-        }
-    }
-}

package/src/components/loader/scss/variables.scss

@@ -1,6 +0,0 @@
-.loader {
-    &-logo{
-        --size: 10svh;
-        --translateY: 8px;
-    }
-}

package/src/components/radio/scss/index.scss

@@ -1,50 +0,0 @@
-@use '/lib';
-@use 'variables';
-
-.radio {
-    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 {
-        background: var(--accent);
-        border-radius: inherit;
-        bottom: 50%;
-        box-shadow: var(--box-shadow);
-        content: '';
-        height: var(--height);
-        opacity: var(--opacity);
-        right: 50%;
-        position: absolute;
-        transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
-        transform-origin: center;
-        width: var(--width);
-    }
-
-    // Hide HTML Field Element
-    &-tag {
-        @include lib.position(absolute, 0 null null 0);
-        height: 0px;
-        opacity: 0;
-        pointer-events: none;
-        width: 0px;
-        z-index: 0;
-    }
-}

package/src/components/radio/scss/variables.scss

@@ -1,67 +0,0 @@
-@use '/tokens';
-
-.radio {
-    --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-default: var(--background);
-    --border-radius: 100%;
-    --border-style: solid;
-    --border-width: 0px;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
-    --height: var(--size);
-    --margin-horizontal: calc(var(--width-switch) - var(--width));
-    --opacity: var(--opacity-default);
-    --opacity-active: 1;
-    --opacity-default: 0.4;
-    --opacity-hover: var(--opacity-default);
-    --opacity-pressed: var(--opacity-default);
-    --rotate: 0deg;
-    --scale: var(--scale-default);
-    --scale-active: 0.9;
-    --scale-default: 0;
-    --scale-hover: 0.8;
-    --scale-pressed: 0.7;
-    --size: var(--size-600);
-    --width: var(--height);
-    --width-switch: 40px;
-
-    &::before {
-        --height: calc((var(--size) / 2) - (var(--border-width) * 2));
-        --box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
-        --translateX: 50%;
-        --translateY: 50%;
-        --width: var(--height);
-    }
-
-    #{tokens.state(inactive, 'label')},
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --opacity: var(--opacity-hover);
-            --scale: var(--scale-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --opacity: var(--opacity-pressed);
-            --scale: var(--scale-pressed);
-        }
-    }
-
-    #{tokens.state(active)} {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --box-shadow: var(--box-shadow-active);
-        --opacity: var(--opacity-active);
-        --scale: var(--scale-active);
-    }
-}

package/src/components/root/index.ts

@@ -1,6 +0,0 @@
-import onclick from './onclick';
-import './scss/index.scss';
-
-
-export default { onclick };
-export { onclick };

package/src/components/root/onclick.ts

@@ -1,20 +0,0 @@
-import factory from '@esportsplus/queue';
-
-
-let queue = factory<VoidFunction | (() => Promise<void>)>(64);
-
-
-const onclick = async () => {
-    let item;
-
-    while (item = queue.next()) {
-        await item();
-    }
-};
-
-onclick.push = (fn: VoidFunction) => {
-    queue.add(fn);
-};
-
-
-export default onclick;

package/src/components/switch/scss/index.scss

@@ -1,48 +0,0 @@
-@use '/lib';
-@use 'variables';
-
-.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 {
-        @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
-        background: var(--accent);
-        border-radius: inherit;
-        box-shadow: var(--box-shadow);
-        content: '';
-        height: var(--height);
-        opacity: var(--opacity);
-        transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
-        transform-origin: center;
-        width: var(--width);
-    }
-
-    // Hide HTML Field Element
-    &-tag {
-        @include lib.position(absolute, 0 null null 0);
-        height: 0px;
-        opacity: 0;
-        pointer-events: none;
-        width: 0px;
-        z-index: 0;
-    }
-}

package/src/components/switch/scss/variables.scss

@@ -1,74 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.switch {
-    --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-default: var(--background);
-    --border-radius: 240px;
-    --border-style: solid;
-    --border-width: 0px;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
-    --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);
-    --padding-horizontal: var(--border-width-400);
-    --padding-vertical: var(--border-width-400);
-    --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: var(--width-switch);
-    --width-switch: 40px;
-
-    &::before {
-        --box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
-        --height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
-        --translateX: 0px;
-        --translateY: 0px;
-        --width: var(--height);
-    }
-
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --color: var(--color-hover);
-            --opacity: var(--opacity-hover);
-            --scale: var(--scale-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);
-            --opacity: var(--opacity-pressed);
-            --scale: var(--scale-pressed);
-        }
-    }
-
-    #{tokens.state(active)} {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --box-shadow: var(--box-shadow-active);
-        --opacity: var(--opacity-active);
-        --scale: var(--scale-active);
-
-        &::before {
-            --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
-        }
-    }
-}