@esportsplus/ui 0.2.3 → 0.2.9

package/build/components/tooltip/menu.js

@@ -1,44 +0,0 @@
-import { effect } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-function template(data) {
-    return html `
-        <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-            ${(data?.items || []).map(item => html `
-                ${item?.border ? html `
-                    <div
-                        class="border ${item?.border?.class || ''}"
-                        style='
-                            margin-left: calc(var(--margin-horizontal) * -1);
-                            width: calc(100% + var(--margin-horizontal) * 2);
-                        '
-                    ></div>
-                ` : ''}
-
-                <${item?.url ? 'a' : 'div'}
-                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? html `onclick='${item.onclick}'` : ''}
-                    style='${item?.style || ''}'
-                    ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-                >
-                    ${item?.svg ? html `
-                        <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
-                            ${item.svg}
-                        </div>
-                    ` : ''}
-
-                    <div class="text --color-text --flex-fill">
-                        ${item.text}
-                    </div>
-                </${item?.url ? 'a' : 'div'}>
-            `)}
-        </div>
-    `;
-}
-export default (data, state) => {
-    effect(() => {
-        if (!state.active || state.render) {
-            return;
-        }
-        state.render = true;
-    });
-    return () => state.render ? template(data) : '';
-};

package/src/components/alert/index.ts

@@ -1,157 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-type Type = 'error' | 'info' | 'success';
-
-
-let modifiers: Record<Type, string> = {
-        error: 'red',
-        info: 'black',
-        success: 'green'
-    },
-    state = reactive({
-        active: false,
-        messages: new Set as Set<string>,
-        seconds: 0,
-        state: 'activating',
-        type: '' as Type
-    }),
-    timeout = 250;
-
-
-function activate(key: Type, messages: string | string[], seconds: number = 0) {
-    if (!Array.isArray(messages)) {
-        messages = [messages];
-    }
-
-    if (!messages.length) {
-        return;
-    }
-
-    if (state.type !== key) {
-        state.messages.clear();
-    }
-    else {
-        // @ts-ignore
-        state.type = '';
-    }
-
-    for (let message of messages) {
-        state.messages.add(message);
-    }
-
-    state.state = 'activating';
-    state.type = key;
-
-    // Slide in animation needs time
-    if (state.active) {
-        state.active = true;
-
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-        return;
-    }
-
-    setTimeout(() => {
-        state.active = true;
-
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-    }, timeout);
-}
-
-function deactivate() {
-    state.state = 'deactivating';
-
-    setTimeout(() => {
-        state.active = false;
-        state.messages.clear();
-    }, timeout);
-}
-
-
-const error = (messages: string | string[], seconds: number = 0) => activate('error', messages, seconds);
-
-const info = (messages: string | string[], seconds: number = 0) => activate('info', messages, seconds);
-
-const success = (messages: string | string[], seconds: number = 0) => activate('success', messages, seconds);
-
-
-const h = () => {
-    // TODO: Fix importing close svg
-    return () => state.active ? html`
-        <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
-                <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
-                    <div class="icon --size-300">
-                        ${html.inline`
-                            <svg width="16" height="16" viewBox="0 0 16 16">
-                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
-                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
-                            </svg>
-                        `}
-                    </div>
-                </div>
-            </div>
-
-            <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
-                <div class="alert-message --active --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
-                    <div class='--flex-row --flex-fill --flex-vertical'>
-                        <div class="--flex-fill --flex-column --padding-right --padding-400">
-                            <h5 class="page-title">
-                                ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
-                            </h5>
-                            ${() => state.type && [...state.messages].map((message) => html`
-                                <p class='--margin-top --margin-border-width-500'>${message}</p>
-                            `)}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    ` : '';
-};
-
-const types = ['error', 'info', 'success'] as const;
-
-
-export default { deactivate, error, html: h, info, success, types };

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

@@ -1,55 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.alert {
-    max-width: var(--max-width);
-    width: calc(100% - (var(--margin-horizontal) * 2));
-
-
-    &--deactivating {
-        opacity: 0;
-        transform: translateY(-50%);
-    }
-
-    &--activating {
-        @include tokens.state(inactive) {
-            transform: translateY(50%);
-        }
-    }
-
-
-    &-close {
-        @include lib.position(absolute, 0 100% 0 null);
-        animation: alert-close var(--transition-duration) ease-in-out;
-        transition: transform var(--transition-duration) ease-in-out;
-        z-index: 0;
-    }
-
-    &-message {
-        opacity: 0;
-        transition:
-            opacity var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
-
-        @include tokens.state(inactive) {
-            pointer-events: none;
-            position: absolute;
-            transform: translateX(calc(25% * -1));
-            left: 0;
-            top: 0;
-        }
-
-        @include tokens.state(active) {
-            opacity: 1;
-        }
-    }
-}
-
-@keyframes alert-close {
-    from {
-        transform: translateX(150%);
-    }
-    to {
-        transform: translateX(0);
-    }
-}

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

@@ -1,8 +0,0 @@
-.alert {
-    --max-width: 420px;
-
-    &-close,
-    &-message {
-        --transition-duration: var(--transition-duration-400);
-    }
-}

package/src/components/export/clipboard.ts

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

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

package/src/components/processing/scss/index.scss

@@ -1,47 +0,0 @@
-@use '/lib';
-
-.processing {
-    height: var(--size);
-    position: relative;
-    width: var(--size);
-    animation: processing var(--animation-duration) linear infinite;
-
-    &-ring {
-        clip: rect(calc(var(--size) / 2), var(--size), var(--size), 0);
-
-        &,
-        &::after,
-        &::before {
-            @include lib.position(absolute, full);
-        }
-
-        &,
-        &::before {
-            animation: processing calc(var(--animation-duration) / 2) cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
-        }
-
-        &::after,
-        &::before {
-            border-radius: 50%;
-            content: "";
-        }
-
-        &::after {
-            border: var(--border-width) var(--border-style) var(--border-color-secondary);
-            opacity: var(--opacity);
-        }
-
-        &::before {
-            border-top: var(--border-width) var(--border-style) var(--border-color-primary);
-        }
-    }
-}
-
-@keyframes processing {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/src/components/processing/scss/variables.scss

@@ -1,11 +0,0 @@
-.processing {
-    --animation-duration: 2.64s;
-    --border-color-primary: var(--color-black-500);
-    --border-color-secondary: var(--color-border-300);
-    --border-style: solid;
-    --border-width: var(--border-width-600);
-    --height: var(--size);
-    --opacity: 0.64;
-    --size: var(--size-600);
-    --width: var(--size);
-}

package/src/components/tooltip/menu.ts

@@ -1,71 +0,0 @@
-import { effect } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-type Data = {
-    class?: string;
-    direction?: string;
-    items?: {
-        border?: {
-            class?: string;
-        };
-        class?: string;
-        onclick?: (...args: any[]) => void;
-        style?: string;
-        svg?: string;
-        target?: string;
-        text: string;
-        url?: string;
-    }[];
-    state?: { active?: boolean };
-    style?: string;
-};
-
-
-function template(data: Data) {
-    return html`
-        <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-            ${(data?.items || []).map(item => html`
-                ${item?.border ? html`
-                    <div
-                        class="border ${item?.border?.class || ''}"
-                        style='
-                            margin-left: calc(var(--margin-horizontal) * -1);
-                            width: calc(100% + var(--margin-horizontal) * 2);
-                        '
-                    ></div>
-                ` : ''}
-
-                <${item?.url ? 'a' : 'div'}
-                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? html`onclick='${item.onclick}'` : ''}
-                    style='${item?.style || ''}'
-                    ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-                >
-                    ${item?.svg ? html`
-                        <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
-                            ${item.svg}
-                        </div>
-                    ` : ''}
-
-                    <div class="text --color-text --flex-fill">
-                        ${item.text}
-                    </div>
-                </${item?.url ? 'a' : 'div'}>
-            `)}
-        </div>
-    `;
-}
-
-
-// TODO: There's nothing binding activate to tooltip menu ( this is never called outside initial effect run )
-export default (data: Data, state: { active?: boolean, render?: boolean }) => {
-    effect(() => {
-        if (!state.active || state.render) {
-            return;
-        }
-
-        state.render = true;
-    });
-
-    return () => state.render ? template(data) : '';
-};

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

@@ -1,21 +0,0 @@
-.--slide {
-    &-in,
-    &-in-reverse {
-        animation-duration: var(--transition-duration);
-        animation-name: --slide-in;
-        animation-timing-function: ease-in-out;
-        transform-origin: top center;
-
-        @keyframes --slide-in {
-            from {
-                opacity: 0;
-                transform: translateY(var(--translateY));
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    }
-}

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

@@ -1,10 +0,0 @@
-.--slide {
-    &-in {
-        --transition-duration: 0.48s;
-        --translateY: 32px;
-
-        &-reverse {
-            --translateY: -32px;
-        }
-    }
-}

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

@@ -1,14 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.--transition {
-    &-duration {
-        --transition-duration: var(--transition-duration-400);
-
-        @each $key in lib.map-keys(tokens.$transition-duration) {
-            &-#{$key} {
-                --transition-duration: var(--transition-duration-#{$key});
-            }
-        }
-    }
-}