@esportsplus/ui 0.51.7 → 0.54.0

package/src/components/alert/index.ts

@@ -1,165 +0,0 @@
-import '@esportsplus/vite/global.d.ts';
-import { Response } from '@esportsplus/action';
-import { html, Attributes, Renderable } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
-import icon from '~/components/icon';
-import check from './svg/check.svg';
-import close from './svg/close.svg';
-import e from './svg/error.svg';
-import './scss/index.scss';
-
-
-type Type = 'error' | 'info' | 'success';
-
-
-const OMIT = ['alert-close', 'alert-messages', 'alert-message'];
-
-
-let modifiers: Record<Type, string> = {
-        error: 'red',
-        info: 'black',
-        success: 'green'
-    },
-    timeout = 250;
-
-
-function activate(key: Type, messages: Renderable<any>, seconds: number, state: { active: boolean, messages: Set<Renderable<any>>, rerender: number, type: Type }) {
-    if (!Array.isArray(messages)) {
-        messages = [messages];
-    }
-
-    if (!messages.length) {
-        return;
-    }
-
-    if (state.type !== key) {
-        state.active = false;
-        state.messages.clear();
-    }
-
-    state.type = key;
-
-    for (let message of messages) {
-        state.messages.add(message);
-    }
-
-    if (state.active) {
-        state.rerender++;
-
-        if (!seconds) {
-            return;
-        }
-
-        setTimeout(deactivate, timeout + (500 * seconds));
-    }
-    else {
-        setTimeout(() => {
-            state.active = true;
-            state.rerender++;
-            state.type = key;
-
-            if (seconds) {
-                setTimeout(deactivate, 500 * seconds);
-            }
-        }, timeout);
-    }
-}
-
-function deactivate(state: { active: boolean, messages: Set<Renderable<any>>, type: Type }) {
-    state.active = false;
-
-    setTimeout(() => {
-        state.messages.clear();
-    }, timeout);
-}
-
-
-export default (attributes: Attributes & { 'alert-close'?: Attributes, 'alert-messages'?: Attributes, 'alert-message'?: Attributes }) => {
-    let state = reactive({
-            active: false,
-            messages: new Set() as Set<Renderable<any>>,
-            rerender: 0,
-            type: '' as Type
-        });
-
-
-    const error = (messages: Renderable<any>, seconds: number = 0) => activate('error', messages, seconds, state);
-
-    error.response = (response: Response<any>) => {
-        if (response.ok) {
-            return;
-        }
-
-        error(
-            response.errors.map(({ message, path }) => {
-                if (!path) {
-                    return message;
-                }
-
-                return `${String(path).split('.').join(' ')} ${message}`;
-            }),
-            5
-        );
-    };
-
-
-    return {
-        content: html`
-            <div
-                class='alert anchor anchor--n ${() => state.active && '--active'} --flex-row'
-                ${omit(attributes, OMIT)}
-            >
-                ${() => {
-                    let type = state.type;
-
-                    return html`
-                        <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
-                            ${icon({ class: '--size-500' }, type === 'error' ? e : check)}
-                        </div>
-                    `;
-                }}
-
-                <div
-                    class='alert-messages --flex-column --flex-fill'
-                    ${attributes['alert-messages']}
-                >
-                    ${() => {
-                        let message = attributes['alert-message'];
-
-                        return state.rerender && [...state.messages].map((content) => {
-                            if (typeof content === 'string') {
-                                return html`
-                                    <p ${message}>
-                                        ${content}
-                                    </p>
-                                `;
-                            }
-
-                            return html`
-                                <div class='--flex-start'>
-                                    ${content}
-                                </div>
-                            `;
-                        });
-                    }}
-                </div>
-
-                <div class="--flex-vertical">
-                    <div
-                        class='alert-close button --padding-300'
-                        onclick='${() => deactivate(state)}'
-                        ${attributes['alert-close']}
-                    >
-                        ${icon({ style: '--size: 14px;' }, close)}
-                    </div>
-                </div>
-            </div>
-        `,
-        deactivate: () => deactivate(state),
-        error,
-        info: (messages: Renderable<any>, seconds: number = 0) => activate('info', messages, seconds, state),
-        success: (messages: Renderable<any>, seconds: number = 0) => activate('success', messages, seconds, state)
-
-    };
-};

package/src/components/alert/scss/index.scss

@@ -1,25 +0,0 @@
-@use '../../anchor/scss';
-@use '/lib';
-@use '/tokens';
-@use 'variables';
-
-.alert {
-    max-width: var(--max-width);
-    padding: var(--padding-vertical) var(--padding-horizontal);
-    position: fixed;
-    width: calc(100% - (var(--margin-horizontal) * 2));
-    z-index: 9999;
-
-
-    &.anchor--n {
-        @include tokens.state(inactive) {
-            transform: translate(50%, -100%);
-        }
-    }
-
-    &.anchor--ne {
-        @include tokens.state(inactive) {
-            transform: translateY(-100%);
-        }
-    }
-}

package/src/components/alert/scss/variables.scss

@@ -1,3 +0,0 @@
-.alert {
-    --max-width: 640px;
-}

package/src/components/alert/svg/check.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<path d="M9,19.5c-0.397,0-0.779-0.158-1.061-0.439l-5-5c-0.586-0.586-0.586-1.535,0-2.121s1.535-0.586,2.121,0l3.893,3.893
-		l9.941-10.846c0.561-0.611,1.509-0.651,2.119-0.092c0.61,0.56,0.651,1.509,0.092,2.12l-11,12c-0.277,0.302-0.665,0.478-1.073,0.486
-		C9.022,19.5,9.011,19.5,9,19.5z"/>
-</g>
-</svg>

package/src/components/alert/svg/close.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<path d="M18,19.5c-0.384,0-0.768-0.146-1.061-0.439L12,14.121l-4.939,4.939c-0.586,0.586-1.535,0.586-2.121,0s-0.586-1.535,0-2.121
-		L9.879,12L4.939,7.061c-0.586-0.585-0.586-1.536,0-2.121c0.586-0.586,1.535-0.586,2.121,0L12,9.879l4.939-4.939
-		c0.586-0.586,1.535-0.586,2.121,0c0.586,0.585,0.586,1.536,0,2.121L14.121,12l4.939,4.939c0.586,0.586,0.586,1.535,0,2.121
-		C18.768,19.354,18.384,19.5,18,19.5z"/>
-</g>
-</svg>

package/src/components/alert/svg/error.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<path d="M12.351,23h-0.702c-4.697,0-7.055,0-8.626-1.132c-1.368-0.986-2.262-2.512-2.454-4.186
-		c-0.22-1.925,0.932-3.981,3.227-8.079l0.352-0.628c2.386-4.26,3.583-6.398,5.383-7.211c1.57-0.708,3.369-0.708,4.939,0
-		c1.8,0.813,2.997,2.95,5.383,7.209l0.352,0.629l-0.873,0.488l0.881-0.474c2.29,4.09,3.439,6.143,3.219,8.064
-		c-0.191,1.675-1.086,3.201-2.453,4.187C19.405,23,17.048,23,12.351,23z M12,3.233c-0.562,0-1.123,0.118-1.646,0.354
-		c-1.2,0.542-2.358,2.61-4.46,6.364L5.542,10.58c-2.02,3.606-3.132,5.592-2.985,6.875c0.128,1.116,0.724,2.133,1.636,2.79
-		C5.24,21,7.516,21,11.649,21h0.702c4.132,0,6.41,0,7.457-0.755c0.912-0.657,1.509-1.674,1.637-2.791
-		c0.146-1.28-0.963-3.262-2.978-6.86l-0.009-0.015l-0.351-0.627c-2.103-3.755-3.261-5.823-4.461-6.365
-		C13.123,3.352,12.562,3.233,12,3.233z M12,18c-0.827,0-1.499-0.672-1.5-1.498c0-0.002,0-0.002,0-0.004
-		C10.501,15.672,11.173,15,12,15c0.826,0,1.499,0.672,1.5,1.498c0,0.002,0,0.002,0,0.004C13.499,17.328,12.826,18,12,18z M12,14
-		c-0.552,0-1-0.447-1-1V9c0-0.552,0.448-1,1-1c0.553,0,1,0.448,1,1v4C13,13.553,12.553,14,12,14z"/>
-</g>
-</svg>

package/src/components/back/index.ts

@@ -1,21 +0,0 @@
-import { html, Attributes } from '@esportsplus/template';
-import icon from '~/components/icon';
-import template from '~/components/template';
-import arrow from './svg/arrow.svg';
-import './scss/index.scss';
-
-
-export default template.factory(
-    function (this: { attributes?: Attributes }, attributes, content) {
-        return html`
-            <a
-                class='back link --padding-0px --flex-vertical'
-                ${this.attributes}
-                ${attributes}
-            >
-                ${icon({ class: 'back-arrow --margin-right --margin-200' }, arrow)}
-                ${content}
-            </a>
-        `;
-    }
-);

package/src/components/back/scss/index.scss

@@ -1,17 +0,0 @@
-@use '@esportsplus/ui/tokens.scss';
-
-
-.back {
-    &-arrow {
-        transform: rotate(-90deg);
-        transition:
-            color var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
-    }
-
-    @include tokens.state(hover) {
-        .back-arrow {
-            transform: rotate(-90deg) translateY(-2px);
-        }
-    }
-}

package/src/components/back/svg/arrow.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g opacity="0.4" enable-background="new    ">
-	<path d="M12,22c-0.552,0-1-0.447-1-1v-6c0-0.553,0.448-1,1-1c0.553,0,1,0.447,1,1v6C13,21.553,12.553,22,12,22z"/>
-</g>
-<g>
-	<path d="M12,16c-0.552,0-1-0.447-1-1V5.414l-5.293,5.293c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.023,0-1.414l7-7
-		c0.096-0.096,0.208-0.169,0.326-0.218C11.735,2.027,11.863,2,11.997,2l0,0c0.002,0,0.004,0,0.006,0l0,0
-		c0.134,0,0.262,0.027,0.378,0.075c0.119,0.049,0.229,0.122,0.326,0.218l7,7c0.391,0.391,0.391,1.023,0,1.414s-1.023,0.391-1.414,0
-		L13,5.414V15C13,15.553,12.553,16,12,16z"/>
-</g>
-</svg>

package/src/components/bubble/scss/index.scss

@@ -1,32 +0,0 @@
-@use './variables';
-
-.bubble {
-    background: var(--background);
-    border-radius: var(--border-radius);
-    height: var(--height);
-    width: var(--width);
-
-
-    &--bottom,
-    &--top {
-        &-left,
-        &-right {
-            position: absolute;
-        }
-
-        @each $direction in 'left' 'right' {
-            &-#{$direction} {
-                #{$direction}: var(--position-horizontal);
-            }
-        }
-    }
-
-    @each $direction in 'bottom' 'top' {
-        &--#{$direction} {
-            &-left,
-            &-right {
-                #{$direction}: var(--position-vertical);
-            }
-        }
-    }
-}

package/src/components/bubble/scss/variables.scss

@@ -1,20 +0,0 @@
-.bubble {
-    --background: var(--background-default);
-    --background-default: var(--color-border-400);
-    --border-radius: 100%;
-    --height: var(--size);
-    --margin-horizontal: var(--size-100);
-    --size: 6px;
-    --width: var(--size);
-
-
-    &--bottom,
-    &--top {
-
-        &-left,
-        &-right {
-            --position-horizontal: calc(var(--size) / -2);
-            --position-vertical: calc(var(--size) / -2);
-        }
-    }
-}

package/src/components/button/index.ts

@@ -1,54 +0,0 @@
-import { html, type Renderable } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import template from '../template';
-import './scss/index.scss';
-
-
-const hold = template.factory(
-    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,9 +0,0 @@
-import scrollbar from '~/components/scrollbar';
-import './scss/index.scss';
-
-
-export default scrollbar.bind({
-    attributes: {
-        class: 'frame'
-    }
-});

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,67 +0,0 @@
-import { html, Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
-import './scss/index.scss';
-
-
-type A = Attributes & { background?: string };
-
-
-const OMIT = ['background'];
-
-
-let key = Symbol(),
-    observer: IntersectionObserver | null = null;
-
-
-export default template.factory(
-    (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,81 +0,0 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities'
-import template from '~/components/template';
-import './scss/index.scss';
-
-
-type A = Attributes & {
-    'loader'?: Attributes,
-    'loader-content'?: Attributes,
-    'loader-logo'?: Attributes
-};
-
-
-const OMIT = ['loader-content', 'loader-logo'];
-
-
-export default template.factory(
-    (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=${(e: AnimationEvent) => {
-                        i++;
-
-                        if (e.animationName === '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>
-            `;
-        }
-    }
-);