@esportsplus/ui 0.1.8 → 0.2.2

package/src/components/alert/index.ts

@@ -1,157 +1,157 @@
-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;
-
-
+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 +1,55 @@
-@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);
-    }
+@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 +1,8 @@
-.alert {
-    --max-width: 420px;
-
-    &-close,
-    &-message {
-        --transition-duration: var(--transition-duration-400);
-    }
-}
+.alert {
+    --max-width: 420px;
+
+    &-close,
+    &-message {
+        --transition-duration: var(--transition-duration-400);
+    }
+}

package/src/components/anchor/scss/index.scss

@@ -1,41 +1,41 @@
-@use '/tokens';
-
-.anchor {
-    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
-    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
-    position: absolute;
-    transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    z-index: 9;
-
-
-    @include tokens.state(inactive) {
-        opacity: 0;
-
-        &, * {
-            pointer-events: none;
-        }
-    }
-
-
-    &--ne,
-    &--nw {
-        top: var(--margin-vertical);
-    }
-
-    &--se,
-    &--sw {
-        bottom: var(--margin-vertical);
-    }
-
-    &--ne,
-    &--se {
-        right: var(--margin-horizontal);
-    }
-
-    &--nw,
-    &--sw {
-        left: var(--margin-horizontal);
-    }
-}
+@use '/tokens';
+
+.anchor {
+    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
+    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
+    position: absolute;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    z-index: 9;
+
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+
+        &, * {
+            pointer-events: none;
+        }
+    }
+
+
+    &--ne,
+    &--nw {
+        top: var(--margin-vertical);
+    }
+
+    &--se,
+    &--sw {
+        bottom: var(--margin-vertical);
+    }
+
+    &--ne,
+    &--se {
+        right: var(--margin-horizontal);
+    }
+
+    &--nw,
+    &--sw {
+        left: var(--margin-horizontal);
+    }
+}

package/src/components/anchor/scss/variables.scss

@@ -1,5 +1,5 @@
-.anchor {
-    --margin-horizontal: var(--size-400);
-    --margin-vertical: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
-}
+.anchor {
+    --margin-horizontal: var(--size-400);
+    --margin-vertical: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+}

package/src/components/banner/scss/index.scss

@@ -1,40 +1,40 @@
-@use '/lib';
-
-.banner {
-    @include lib.position(absolute, full);
-    background-position: center;
-    background-size: cover;
-    z-index: -1;
-
-
-    &--backdrop {
-        background-position: bottom;
-        height: 80svh;
-    }
-
-    &--blur {
-        filter: blur(24px);
-        left: -2svh;
-        right: -2svh;
-        top: -2svh;
-
-        &.banner--backdrop {
-            height: 90svh;
-        }
-    }
-
-    &--fixed {
-        position: fixed;
-    }
-
-    &--gradient {
-        &::before {
-            @include lib.position(absolute, full);
-            background:
-                radial-gradient(circle at top, transparent 64%, var(--to) 88%),
-                linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);
-            content: '';
-            z-index: 0;
-        }
-    }
-}
+@use '/lib';
+
+.banner {
+    @include lib.position(absolute, full);
+    background-position: center;
+    background-size: cover;
+    z-index: -1;
+
+
+    &--backdrop {
+        background-position: bottom;
+        height: 80svh;
+    }
+
+    &--blur {
+        filter: blur(24px);
+        left: -2svh;
+        right: -2svh;
+        top: -2svh;
+
+        &.banner--backdrop {
+            height: 90svh;
+        }
+    }
+
+    &--fixed {
+        position: fixed;
+    }
+
+    &--gradient {
+        &::before {
+            @include lib.position(absolute, full);
+            background:
+                radial-gradient(circle at top, transparent 64%, var(--to) 88%),
+                linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);
+            content: '';
+            z-index: 0;
+        }
+    }
+}

package/src/components/banner/scss/variables.scss

@@ -1,6 +1,6 @@
-.banner {
-    &--gradient {
-        --from: rgba(3,0,19, 0.32);
-        --to: var(--color-black-500);
-    }
+.banner {
+    &--gradient {
+        --from: rgba(3,0,19, 0.32);
+        --to: var(--color-black-500);
+    }
 }

package/src/components/border/scss/index.scss

@@ -1,10 +1,10 @@
-.border {
-    border-top: var(--border-width) var(--border-style) var(--border-color);
-    position: relative;
-    width: 100%;
-
-
-    & + & {
-        display: none;
-    }
-}
+.border {
+    border-top: var(--border-width) var(--border-style) var(--border-color);
+    position: relative;
+    width: 100%;
+
+
+    & + & {
+        display: none;
+    }
+}

package/src/components/border/scss/variables.scss

@@ -1,6 +1,6 @@
-.border {
-    --border-color: var(--border-color-default);
-    --border-color-default: var(--color-border-400);
-    --border-style: solid;
-    --border-width: var(--border-width-400);
-}
+.border {
+    --border-color: var(--border-color-default);
+    --border-color-default: var(--color-border-400);
+    --border-style: solid;
+    --border-width: var(--border-width-400);
+}