@esportsplus/ui 0.51.7 → 0.53.0

package/build/themes/dark/alert.js

@@ -1,20 +0,0 @@
-import alert from '../../components/alert/index.js';
-export default alert({
-    class: '--margin-600 --padding-500',
-    style: `
-        background: var(--color-black-400);
-        border: 2px solid var(--color-black-300);
-        box-shadow: var(--box-shadow-300);
-    `,
-    'alert-close': {
-        class: '--background-black --border-radius-300 --color-white',
-        style: '--color-default: var(--color-grey-500);margin: calc(var(--size-100) * -1) 0;'
-    },
-    'alert-messages': {
-        class: '--padding-horizontal --padding-500',
-        style: 'justify-content: center;'
-    },
-    'alert-message': {
-        style: 'color: var(--color-white-400);'
-    },
-});

package/src/components/accordion/scss/variables.scss

@@ -1,9 +0,0 @@
-@use '/tokens';
-
-.accordion {
-    --max-height: 0;
-
-    @include tokens.state(inactive) {
-        --max-height: 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/scrollbar/index.ts

@@ -1,70 +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 & { scrollbar?: Attributes, 'scrollbar-container-content'?: Attributes };
-
-
-const OMIT = ['scrollbar', 'scrollbar-container-content'];
-
-
-let root = document.body,
-    width: number | undefined;
-
-
-export default template.factory<A>(
-    function(this: { attributes?: A }, attributes, content) {
-        let state = reactive({
-                height: 100,
-                translate: 0
-            });
-
-        return html`
-            <div
-                class='scrollbar-container'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${omit(attributes, OMIT)}
-            >
-                <div
-                    class='scrollbar-container-content'
-                    ${this?.attributes?.['scrollbar-container-content']}
-                    ${attributes['scrollbar-container-content']}
-                    ${{
-                        onscroll: function() {
-                            if (width === undefined) {
-                                width = this.offsetWidth - this.clientWidth;
-
-                                if (width && width !== 17) {
-                                    root.style.setProperty('--scrollbar-width', `${width}px`);
-                                }
-                            }
-
-                            state.height = (this.clientHeight / this.scrollHeight) * 100;
-                            state.translate = (this.scrollTop / this.clientHeight) * 100;
-                        }
-                    }}
-                >
-                    ${content}
-                </div>
-
-                <div
-                    class='scrollbar'
-                    ${this?.attributes?.scrollbar}
-                    ${attributes.scrollbar}
-                    ${{
-                        class: () => state.height >= 100 && 'scrollbar--hidden',
-                        style: () => `
-                            --translate: translate3d(0, ${state.translate}%, 0);
-                            --height: ${state.height}%;
-                        `
-                    }}
-                >
-                </div>
-            </div>
-        `;
-    }
-);
-export type { A as Attributes }

package/src/components/scrollbar/scss/index.scss

@@ -1,82 +0,0 @@
-@use 'variables';
-
-// Hide Chrome Mobile Scrollbar
-::-webkit-scrollbar,
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:window-inactive {
-    background: transparent;
-    box-shadow: unset;
-}
-
-.scrollbar {
-    height: 100%;
-    z-index: 9;
-
-
-    &,
-    &::before {
-        position: absolute;
-        right: 0;
-        top: 0;
-        transition: opacity var(--transition-duration) ease-in-out;
-        width: var(--width);
-    }
-
-    &::before {
-        background: var(--background);
-        border-radius: 1px 0 0 1px;
-        content: '';
-        height: var(--height);
-        transform: var(--translate);
-        transform-origin: top center;
-    }
-
-
-    &--fixed {
-        position: fixed;
-    }
-
-    &--hidden {
-        opacity: 0;
-    }
-
-
-    &-container {
-        display: flex;
-        flex-flow: column;
-        height: auto;
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-
-        &--full {
-            height: 100%;
-        }
-
-        &-content {
-            display: flex;
-            flex-wrap: wrap;
-            height: 100%;
-            justify-content: flex-start;
-            margin-right: calc(var(--scrollbar-width) * -1);
-            overflow-x: hidden;
-            overflow-y: scroll;
-            padding-right: var(--scrollbar-width);
-            scrollbar-gutter: stable;
-            scroll-behavior: smooth;
-            width: calc(100% + var(--scrollbar-width));
-
-            &--snap {
-                overflow: auto;
-                scroll-snap-type: both mandatory;
-                overscroll-behavior-x: contain;
-
-                > * {
-                    scroll-snap-stop: normal;
-                    scroll-snap-align: center;
-                }
-            }
-        }
-    }
-}

package/src/components/scrollbar/scss/variables.scss

@@ -1,6 +0,0 @@
-.scrollbar {
-    --background: var(--color-black-300);
-    --height: 0;
-    --translate: translate3d(0, 0, 0);
-    --width: 4px;
-}

package/src/components/site/index.ts

@@ -1,11 +0,0 @@
-import { onclick } from '~/components/root';
-import scrollbar from '~/components/scrollbar';
-import './scss/index.scss';
-
-
-export default scrollbar.bind({
-    attributes: {
-        class: 'site',
-        onclick
-    }
-});

package/src/components/site/scss/index.scss

@@ -1,3 +0,0 @@
-.site {
-    z-index: 0;
-}

package/src/components/template/index.ts

@@ -1,40 +0,0 @@
-import { Attributes, Renderable } from '@esportsplus/template';
-
-
-const factory = <
-    A extends Attributes,
-    C = Renderable<any>,
-    Context = { attributes?: A, content?: C }
->(
-    template: (this: Context, attributes: Readonly<A>, content: C) => Renderable<any>
-) => {
-    function factory(): ReturnType<typeof template>;
-    function factory<T extends A>(attributes: T): ReturnType<typeof template>;
-    function factory<T extends C>(content: T): ReturnType<typeof template>;
-    function factory(attributes: A, content: C): ReturnType<typeof template>;
-    function factory(this: Context, one?: A | C, two?: C): ReturnType<typeof template> {
-        let attributes: A = {} as A,
-            content: C;
-
-        if (two === undefined) {
-            if (typeof one === 'object') {
-                attributes = one as A;
-                content = null as C;
-            }
-            else {
-                content = one as C;
-            }
-        }
-        else {
-            attributes = one as A;
-            content = two;
-        }
-
-        return template.call(this, attributes, content);
-    }
-
-    return factory;
-};
-
-
-export default { factory };

package/src/css-utilities/scroller/scss/index.scss

@@ -1,8 +0,0 @@
-@use 'variables';
-
-.--scroller {
-    flex-flow: row;
-    margin-bottom: calc(var(--scrollbar-width) * -1);
-    overflow-y: hidden;
-    padding-bottom: var(--scrollbar-width);
-}

package/src/css-utilities/scroller/scss/variables.scss

@@ -1,4 +0,0 @@
-.--scroller {
-    --gap-vertical: 0px;
-    --margin-vertical: 0px;
-}

package/src/themes/dark/alert.ts

@@ -1,23 +0,0 @@
-import alert from '~/components/alert';
-
-
-export default alert({
-    class: '--margin-600 --padding-500',
-    style: `
-        background: var(--color-black-400);
-        border: 2px solid var(--color-black-300);
-        box-shadow: var(--box-shadow-300);
-    `,
-
-    'alert-close': {
-        class: '--background-black --border-radius-300 --color-white',
-        style: '--color-default: var(--color-grey-500);margin: calc(var(--size-100) * -1) 0;'
-    },
-    'alert-messages': {
-        class: '--padding-horizontal --padding-500',
-        style: 'justify-content: center;'
-    },
-    'alert-message': {
-        style: 'color: var(--color-white-400);'
-    },
-});