@esportsplus/ui 0.2.5 → 0.2.9

package/package.json

@@ -2,11 +2,11 @@
     "author": "ICJR",
     "dependencies": {
         "@esportsplus/action": "^0.0.50",
-        "@esportsplus/reactivity": "^0.1.27",
-        "@esportsplus/template": "^0.2.10"
+        "@esportsplus/reactivity": "^0.1.28",
+        "@esportsplus/template": "^0.3.1"
     },
     "devDependencies": {
-        "@esportsplus/webpack": "^0.4.9",
+        "@esportsplus/webpack": "^0.4.11",
         "modern-normalize": "^2.0.0"
     },
     "main": "build/index.js",
@@ -21,5 +21,5 @@
     },
     "sideEffects": false,
     "types": "build/index.d.ts",
-    "version": "0.2.5"
+    "version": "0.2.9"
 }

package/src/components/accordion/index.ts

@@ -0,0 +1,34 @@
+import { reactive } from '@esportsplus/reactivity';
+
+
+let key = Symbol();
+
+
+export default () => {
+    let state = reactive({
+            active: 0 as boolean | number
+        });
+
+    return {
+        attributes: {
+            class: () => {
+                return state.active && '--active';
+            },
+            onrender: (element: HTMLElement & Record<PropertyKey, unknown>) => {
+                element[key] = state;
+            },
+            style: (element: HTMLElement) => {
+                if (state.active) {
+                    let parent = element.closest('accordion') as (HTMLElement & { [k: typeof key]: typeof state }) | null;
+
+                    if (parent && key in parent) {
+                        parent[key].active = (+parent[key].active) + 1;
+                    }
+                }
+
+                return state.active && `--max-height: ${element.scrollHeight}`;
+            }
+        },
+        state
+    };
+}

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

@@ -1,4 +1,9 @@
+@use '/tokens';
+
 .accordion {
     --max-height: 0;
-    --transition-duration: var(--transition-duration-400);
+
+    @include tokens.state(inactive) {
+        --max-height: 0;
+    }
 }

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

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

package/src/components/aurora/index.ts

@@ -0,0 +1,22 @@
+import { html } from '@esportsplus/template';
+
+
+type Options = {
+    backgrounds: [string, string, string, string];
+    blur?: string;
+    opacity?: number;
+    scale?: number;
+};
+
+
+export default ({ backgrounds, blur, opacity, scale }: Options) => html`
+    <div class="aurora" ${{
+        style: {
+            '--blur': blur || '50px',
+            '--opacity': opacity || 0.8,
+            '--scale': scale || 1
+        }
+    }}>
+        ${backgrounds.map((bg) => html`<div style='${`--background-color: ${bg}`}'></div>`)}
+    </div>
+`;

package/src/components/aurora/scss/index.scss

@@ -0,0 +1,60 @@
+.aurora {
+    inset: 0;
+    position: absolute;
+    overflow: hidden;
+
+    div {
+        background-color: var(--background-color);
+        position: absolute;
+        filter: blur(var(--blur));
+        opacity: var(--opacity);
+
+        :nth-child(1) {
+            animation: AuroraFirstChild 12s linear infinite;
+            border-radius: 100%;
+            height: 600px;
+            inset: -300px auto auto -50px;
+            transform: rotate(0) translate(80px) rotate(0) scale(var(--scale));
+            width: 600px;
+            z-index: 3;
+        }
+
+        :nth-child(2) {
+            inset: auto auto -30px -80px;
+            height: 800px;
+            transform: scale(var(--scale));
+            width: 500px;
+        }
+
+        :nth-child(3) {
+            animation: AuroraSiblings 10s linear infinite;
+            border-radius: 100%;
+            height: 450px;
+            inset: auto -100px -80px auto;
+            transform: rotate(0) translate(200px) rotate(0) scale(var(--scale));
+            width: 450px;
+        }
+
+        :nth-child(4) {
+            animation: AuroraSiblings 15s linear infinite;
+            border-radius: 100%;
+            height: 350px;
+            inset: auto 0 0 auto;
+            margin: auto;
+            transform: rotate(0) translate(200px) rotate(0) scale(var(--scale));
+            width: 350px;
+        }
+
+        @keyframes AuroraFirstChild {
+            100% {
+                transform: rotate(2turn) translate(200px) rotate(-2turn);
+            }
+        }
+
+        @keyframes AuroraSiblings {
+            100% {
+                transform: rotate(-2turn) translate(200px) rotate(2turn);
+            }
+        }
+    }
+}

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

@@ -13,7 +13,7 @@
     }
 
     &--blur {
-        filter: blur(24px);
+        filter: blur(var(--blur));
         left: -2svh;
         right: -2svh;
         top: -2svh;

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

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

package/src/components/button/scss/index.scss

@@ -46,8 +46,9 @@
 
         &::before {
             @include lib.position(absolute, center);
-            animation: button--processing var(--animation-duration) infinite linear;
-            border: var(--border-width) solid var(--border-color);
+            animation: ButtonProcessing var(--animation-duration) infinite linear;
+            border: var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);
+            border-left-color: var(--border-color);
             border-radius: 100%;
             border-right-color: transparent;
             border-top-color: transparent;
@@ -60,7 +61,7 @@
             opacity: 0;
         }
 
-        @keyframes button--processing {
+        @keyframes ButtonProcessing {
             0% {
                 transform: translate(50%, 50%) rotate(0deg);
             }
@@ -70,6 +71,27 @@
         }
     }
 
+    &--skeleton {
+        animation: var(--animation-duration) ease-in-out infinite ButtonSkeleton;
+        background-image: linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));
+        background-size: 400% 100%;
+        color: transparent;
+        pointer-events: none;
+
+        * {
+            opacity: 0;
+        }
+
+        @keyframes ButtonSkeleton {
+            0% {
+                background-position: 200% 0;
+            }
+            100% {
+                background-position: -200% 0;
+            }
+        }
+    }
+
     &--top {
         &-left,
         &-right {

package/src/components/button/scss/variables.scss

@@ -29,7 +29,6 @@
     --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
     --width: auto;
 
     @include tokens.state(active) {
@@ -59,11 +58,9 @@
         --border-color: var(--color);
         --border-width: var(--border-width-400);
         --size: var(--size-400);
+    }
 
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --border-width: var(--border-width-#{$key});
-            }
-        }
+    &--skeleton {
+        --animation-duration: 6.4s;
     }
 }

package/src/components/card/scss/variables.scss

@@ -19,7 +19,6 @@
     --box-shadow-pressed: none;
     --padding-horizontal: 0px;
     --padding-vertical: 0px;
-    --transition-duration: var(--transition-duration-400);
     --width: auto;
 
     @include tokens.state(active) {

package/src/components/clipboard/index.ts

@@ -0,0 +1,4 @@
+import write from './write';
+
+
+export default { write };

package/src/components/clipboard/write.ts

@@ -0,0 +1,9 @@
+export default async (value: string) => {
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/src/components/container/scss/index.scss

@@ -2,9 +2,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin: 0 auto;
-    max-width: var(--max-width);
-    padding: var(--padding-vertical) var(--padding-horizontal);
+    margin: var(--margin-vertical) auto;
     position: relative;
-    width: 100%;
+    width: min(var(--max-width), calc(100% - var(--margin-horizontal) * 2));
 }

package/src/components/container/scss/variables.scss

@@ -1,5 +1,5 @@
 .container {
+    --margin-horizontal: var(--size-600);
+    --margin-vertical: 0px;
     --max-width: 1400px;
-    --padding-horizontal: var(--size-600);
-    --padding-vertical: 0px;
 }

package/src/components/ellipsis/index.ts

@@ -0,0 +1,10 @@
+import { html } from '@esportsplus/template';
+
+
+export default (attributes?: Record<string, string>) => html`
+    <div class="ellipsis" ${attributes}>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+`;

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

@@ -1,72 +1,28 @@
 .ellipsis {
-    &-dot {
-        &:nth-child(1) {
-            animation: ellipsis-dot-one var(--animation-duration) linear infinite;
-        }
+    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: ellipsis-dot-two var(--animation-duration) linear infinite;
+        :nth-child(2) {
+            animation-delay: 0.24s;
         }
 
-        &:nth-child(3) {
-            animation: ellipsis-dot-three var(--animation-duration) linear infinite;
+        :nth-child(3) {
+            animation-delay: 0.48s;
         }
     }
-}
-
-@keyframes ellipsis-dot-one {
-    0% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes ellipsis-dot-two {
-    0% {
-        opacity: 0;
-    }
-    21% {
-        opacity: 0;
-    }
-    22% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-    }
-}
 
-@keyframes ellipsis-dot-three {
-    0% {
-        opacity: 0;
-    }
-    43% {
-        opacity: 0;
-    }
-    44% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
+    @keyframes Ellipsis {
+        0%, 100% {
+            opacity: 0.16;
+        }
+        20% {
+            opacity: 1;
+        }
     }
 }

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

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

package/src/components/field/scss/index.scss

@@ -62,9 +62,9 @@
     }
 
     &-error {
-        animation: field-error 0.32s 1 linear;
+        animation: FieldError 0.32s 1 linear;
 
-        @keyframes field-error {
+        @keyframes FieldError {
             0% {
                 transform: translate(8px);
             }

package/src/components/field/scss/variables.scss

@@ -3,7 +3,6 @@
 @use 'text' as text;
 
 .field {
-    --transition-duration: var(--transition-duration-400);
     --width: 100%;
 
 

package/src/components/field/select.ts

@@ -55,8 +55,10 @@ function parse(keys: (number | string)[], selected: number | string) {
 
 function template(data: Data, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
     let { attributes: a, html: h } = scrollbar({
-            fixed: true,
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+            attributes: {
+                style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+            },
+            fixed: true
         });
 
     return html`

package/src/components/form/action.ts

@@ -1,6 +1,6 @@
 import response from '@esportsplus/action';
 import { Action } from './types';
-import alert from '~/components/alert';
+// import alert from '~/components/alert';
 import input from './input';
 
 
@@ -45,7 +45,8 @@ export default function(action: Action) {
             event?.submitter?.classList.add('button--processing');
 
             let { errors } = await action({
-                    alert,
+                    // @ts-ignore
+                    alert: null,
                     input: parse( Object.fromEntries( new FormData( this )?.entries() ) ),
                     response
                 });

package/src/components/form/types.ts

@@ -1,5 +1,5 @@
 import response, { Response } from '@esportsplus/action';
-import alert from '~/components/alert';
+// import alert from '~/components/alert';
 
 
 type Action = (data: Payload) => Promise<Errors> | Errors;

package/src/components/grid/scss/index.scss

@@ -0,0 +1,6 @@
+.grid {
+    display: grid;
+    grid-gap: var(--margin-horizontal) var(--margin-vertical);
+    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), var(--max-width)));
+    position: relative;
+}

package/src/components/grid/scss/variables.scss

@@ -0,0 +1,6 @@
+.group {
+    --margin-horizontal: var(--size-400);
+    --margin-vertical: var(--size-400);
+    --max-width: 1fr;
+    --min-width: 200px;
+}

package/src/components/group/scss/index.scss

@@ -2,9 +2,9 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin: 0 calc(var(--margin-horizontal) / -2);
+    margin: 0 calc(var(--margin-horizontal) * -1);
     position: relative;
-    width: calc(100% + var(--margin-horizontal));
+    width: calc(100% + var(--margin-horizontal) * 2);
 
 
     &--offset {
@@ -25,12 +25,12 @@
 
     &-item {
         display: flex;
-        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
+        margin: var(--margin-vertical) var(--margin-horizontal) 0;
         position: relative;
         width: var(--width);
 
         &[class*='--width'] {
-            width: calc(var(--width) - var(--margin-horizontal));
+            width: calc(var(--width) - var(--margin-horizontal) * 2);
         }
     }
 }

package/src/components/icon/scss/index.scss

@@ -3,7 +3,6 @@
     display: flex;
     flex: 0 0 var(--width);
     height: var(--height);
-    pointer-events: none;
     position: relative;
     width: var(--width);
 

package/src/components/json/index.ts

@@ -0,0 +1,4 @@
+import download from './download';
+
+
+export default { download };

package/src/components/link/scss/variables.scss

@@ -23,7 +23,6 @@
     --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
     --width: auto;
 
 

package/src/components/loading/scss/index.scss

@@ -1,24 +1,17 @@
 .loading {
-    animation: loading var(--animation-duration) infinite linear;
-    animation-delay: var(--animation-delay);
-    border: var(--border-width) var(--border-style) var(--border-color);
+    animation: Loading var(--animation-duration) linear infinite;
+    border: var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);
+    border-left-color: var(--border-color);
     border-radius: 100%;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    box-shadow: var(--box-shadow);
-    height: var(--height);
-    pointer-events: none;
-    position: relative;
-    transition: border-color var(--transition-duration) ease-in-out;
-    width: var(--width);
-    z-index: 0;
+    height: var(--size);
+    width: var(--size);
 }
 
-@keyframes loading {
+@keyframes Loading {
     0% {
-        transform: rotate(0deg);
+        transform: rotate(0deg)
     }
     100% {
-        transform: rotate(360deg);
+        transform: rotate(360deg)
     }
-}
+}

package/src/components/loading/scss/variables.scss

@@ -1,31 +1,6 @@
 .loading {
-    --animation-delay: calc(0s + (0.032s * var(--i)));
-    --animation-duration: calc(0.64s * (var(--i) + 1.5));
-    --border-color: inherit;
-    --border-style: solid;
+    --animation-duration: 0.64s;
+    --border-color: var(--color);
     --border-width: var(--border-width-400);
-    --box-shadow: none;
-    --height: calc(var(--size) * var(--multiplier));
-    --i: 0;
-    --multiplier: calc(1 - (.2 * var(--i)));
     --size: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
-    --width: calc(var(--size) * var(--multiplier));
-
-    .loading {
-        --i: 1;
-        --size: inherit;
-
-        .loading {
-            --i: 2;
-
-            .loading {
-                --i: 3;
-
-                .loading {
-                    --i: 4;
-                }
-            }
-        }
-    }
-}
+}

package/src/components/modal/scss/index.scss

@@ -4,11 +4,12 @@
 .modal {
     @include lib.position(fixed, center);
     max-height: var(--max-height);
-    max-width: var(--max-width);
     overflow: hidden;
-    transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
     transform-origin: center;
-    width: var(--width);
+    width: min(var(--max-width), calc(100svw - (var(--margin-horizontal) * 2)));
     z-index: 2;
 
     @include tokens.state(inactive) {
@@ -22,7 +23,9 @@
     }
 
     &-frame {
-        transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+        transition:
+            opacity var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
         transform-origin: center;
 
         @include tokens.state(inactive) {

package/src/components/modal/scss/variables.scss

@@ -1,10 +1,6 @@
 .modal {
-    --max-height: calc(100svh - (var(--margin) * 2));
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
+    --max-height: calc(100svh - (var(--margin-vertical) * 2));
     --max-width: 320px;
-    --width: calc(100svw - (var(--margin) * 2));
-
-    &,
-    &-frame {
-        --transition-duration: var(--transition-duration-300);
-    }
 }