@esportsplus/ui 0.5.4 → 0.5.5

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

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

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

@@ -1,36 +1,36 @@
-.group {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin: 0 calc(var(--margin-horizontal) / -2);
-    position: relative;
-    width: calc(100% + var(--margin-horizontal));
-
-
-    &--offset {
-        @each $direction in 'bottom' 'top' {
-            &-#{$direction} {
-                margin-#{$direction}: calc(var(--margin-vertical) * -1);
-            }
-        }
-    }
-
-    &--scroller {
-        flex-flow: row;
-        margin-bottom: calc(var(--scrollbar-width) * -1);
-        overflow-y: hidden;
-        padding-bottom: var(--scrollbar-width);
-    }
-
-
-    &-item {
-        display: flex;
-        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
-        position: relative;
-        width: var(--width);
-
-        &[class*='--width'] {
-            width: calc(var(--width) - var(--margin-horizontal));
-        }
-    }
-}
+.group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: 0 calc(var(--margin-horizontal) / -2);
+    position: relative;
+    width: calc(100% + var(--margin-horizontal));
+
+
+    &--offset {
+        @each $direction in 'bottom' 'top' {
+            &-#{$direction} {
+                margin-#{$direction}: calc(var(--margin-vertical) * -1);
+            }
+        }
+    }
+
+    &--scroller {
+        flex-flow: row;
+        margin-bottom: calc(var(--scrollbar-width) * -1);
+        overflow-y: hidden;
+        padding-bottom: var(--scrollbar-width);
+    }
+
+
+    &-item {
+        display: flex;
+        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
+        position: relative;
+        width: var(--width);
+
+        &[class*='--width'] {
+            width: calc(var(--width) - var(--margin-horizontal));
+        }
+    }
+}

package/src/components/group/scss/variables.scss

@@ -1,17 +1,17 @@
-.group {
-    --margin-horizontal: var(--size-400);
-    --width: auto;
-
-
-    &.--flex-column {
-        .group-item {
-            --width: 100%;
-        }
-    }
-
-    &--scroller {
-        .group-item {
-            --margin-vertical: 0px;
-        }
-    }
-}
+.group {
+    --margin-horizontal: var(--size-400);
+    --width: auto;
+
+
+    &.--flex-column {
+        .group-item {
+            --width: 100%;
+        }
+    }
+
+    &--scroller {
+        .group-item {
+            --margin-vertical: 0px;
+        }
+    }
+}

package/src/components/highlight/index.ts

@@ -1,48 +1,48 @@
-import { reactive } from '@esportsplus/reactivity'
-
-
-let key = Symbol(),
-    observer: IntersectionObserver | null = null;
-
-
-export default (background: string) => {
-    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 {
-        attributes: {
-            class: 'highlight',
-            onrender: function(element: HTMLElement & Record<PropertyKey, unknown>) {
-                element[key] = state;
-                observer!.observe(element);
-            },
-            style: [ `--background: ${background}`, () => `--highlight: ${state.highlight}` ]
-        }
-    };
+import { reactive } from '@esportsplus/reactivity'
+
+
+let key = Symbol(),
+    observer: IntersectionObserver | null = null;
+
+
+export default (background: string) => {
+    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 {
+        attributes: {
+            class: 'highlight',
+            onrender: function(element: HTMLElement & Record<PropertyKey, unknown>) {
+                element[key] = state;
+                observer!.observe(element);
+            },
+            style: [ `--background: ${background}`, () => `--highlight: ${state.highlight}` ]
+        }
+    };
 }

package/src/components/highlight/scss/index.scss

@@ -1,5 +1,5 @@
-.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;
+.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 +1,4 @@
-.highlight {
-    --background: transparent;
-    --highlight: 1;
+.highlight {
+    --background: transparent;
+    --highlight: 1;
 }

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

@@ -1,16 +1,16 @@
-.icon {
-    color: var(--color);
-    display: flex;
-    flex: 0 0 var(--width);
-    height: var(--height);
-    position: relative;
-    width: var(--width);
-
-
-    svg {
-        color: currentColor;
-        fill: currentColor;
-        height: 100%;
-        width: 100%;
-    }
-}
+.icon {
+    color: var(--color);
+    display: flex;
+    flex: 0 0 var(--width);
+    height: var(--height);
+    position: relative;
+    width: var(--width);
+
+
+    svg {
+        color: currentColor;
+        fill: currentColor;
+        height: 100%;
+        width: 100%;
+    }
+}

package/src/components/icon/scss/variables.scss

@@ -1,7 +1,7 @@
-.icon {
-    --color: inherit;
-    --height: var(--size);
-    --margin-horizontal: var(--size-300);
-    --size: var(--size-400);
-    --width: var(--size);
-}
+.icon {
+    --color: inherit;
+    --height: var(--size);
+    --margin-horizontal: var(--size-300);
+    --size: var(--size-400);
+    --width: var(--size);
+}

package/src/components/json/download.ts

@@ -1,15 +1,15 @@
-export default (content: any[] | Record<string, any>, name: string) => {
-    let link = document.createElement('a');
-
-    link.download = name + '.json';
-    link.href = window.URL.createObjectURL(new Blob(
-        [ JSON.stringify(content) ],
-        { type: 'application/json' }
-    ));
-
-    document.body.appendChild(link);
-
-    link.click();
-
-    document.body.removeChild(link);
+export default (content: any[] | Record<string, any>, name: string) => {
+    let link = document.createElement('a');
+
+    link.download = name + '.json';
+    link.href = window.URL.createObjectURL(new Blob(
+        [ JSON.stringify(content) ],
+        { type: 'application/json' }
+    ));
+
+    document.body.appendChild(link);
+
+    link.click();
+
+    document.body.removeChild(link);
 };

package/src/components/json/index.ts

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

package/src/components/link/scss/index.scss

@@ -1,28 +1,28 @@
-@use '/tokens';
-
-.link {
-    align-content: center;
-    background: var(--background);
-    color: var(--color);
-    cursor: pointer;
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--font-size);
-    justify-content: flex-start;
-    line-height: var(--line-height);
-    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
-    position: relative;
-    transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        color var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-    width: var(--width);
-
-
-    &--underline {
-        @include tokens.state(active hover) {
-            text-decoration: underline;
-        }
-    }
-}
+@use '/tokens';
+
+.link {
+    align-content: center;
+    background: var(--background);
+    color: var(--color);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    justify-content: flex-start;
+    line-height: var(--line-height);
+    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        color var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+    width: var(--width);
+
+
+    &--underline {
+        @include tokens.state(active hover) {
+            text-decoration: underline;
+        }
+    }
+}

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

@@ -1,46 +1,46 @@
-@use '/tokens';
-
-.link {
-    --background: var(--background-default);
-    --background-active: var(--background-default);
-    --background-default: transparent;
-    --background-hover: var(--background-default);
-    --background-pressed: var(--background-default);
-    --border-color: var(--border-color-default);
-    --border-color-active: var(--border-color-default);
-    --border-color-default: var(--background);
-    --border-color-hover: var(--border-color-default);
-    --border-color-pressed: var(--border-color-default);
-    --border-radius: var(--border-radius-400);
-    --border-width: 0px;
-    --color: var(--color-default);
-    --color-active: var(--color-default);
-    --color-default: var(--color-text-400);
-    --color-hover: var(--color-default);
-    --color-pressed: var(--color-default);
-    --font-size: var(--font-size-400);
-    --font-weight: var(--font-weight-500);
-    --line-height: var(--line-height-400);
-    --padding-horizontal: 0px;
-    --padding-vertical: var(--size-400);
-    --width: auto;
-
-
-    @include tokens.state(active) {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --color: var(--color-active);
-    }
-
-    @include tokens.state(hover) {
-        --background: var(--background-hover);
-        --border-color: var(--border-color-hover);
-        --color: var(--color-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --background: var(--background-pressed);
-        --border-color: var(--border-color-pressed);
-        --color: var(--color-pressed);
-    }
-}
+@use '/tokens';
+
+.link {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-default);
+    --border-radius: var(--border-radius-400);
+    --border-width: 0px;
+    --color: var(--color-default);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-500);
+    --line-height: var(--line-height-400);
+    --padding-horizontal: 0px;
+    --padding-vertical: var(--size-400);
+    --width: auto;
+
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --color: var(--color-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --color: var(--color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+        --border-color: var(--border-color-pressed);
+        --color: var(--color-pressed);
+    }
+}

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

@@ -1,17 +1,17 @@
-.loading {
-    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%;
-    height: var(--size);
-    width: var(--size);
-}
-
-@keyframes Loading {
-    0% {
-        transform: rotate(0deg)
-    }
-    100% {
-        transform: rotate(360deg)
-    }
+.loading {
+    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%;
+    height: var(--size);
+    width: var(--size);
+}
+
+@keyframes Loading {
+    0% {
+        transform: rotate(0deg)
+    }
+    100% {
+        transform: rotate(360deg)
+    }
 }

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

@@ -1,6 +1,6 @@
-.loading {
-    --animation-duration: 0.64s;
-    --border-color: var(--color);
-    --border-width: var(--border-width-400);
-    --size: var(--size-400);
+.loading {
+    --animation-duration: 0.64s;
+    --border-color: var(--color);
+    --border-width: var(--border-width-400);
+    --size: var(--size-400);
 }

package/src/components/magnet/index.ts

@@ -1,55 +1,55 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hide?: boolean }) => {
-    let active = false,
-        events: Record<string, Function> = {
-            onmouseover: function (this: HTMLElement) {
-                let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
-
-                active = true;
-
-                state.height = offsetHeight;
-                state.left = offsetLeft;
-                state.opacity = 1;
-                state.top = offsetTop;
-                state.width = offsetWidth;
-            }
-        },
-        state = reactive({
-            height: null as number | null,
-            hide: true,
-            left: 0,
-            opacity: 0,
-            top: 0,
-            width: 0
-        });
-
-    if (hide === true) {
-        events.onmouseout = () => {
-            active = false;
-            setTimeout(() => {
-                if (active === true) {
-                    return;
-                }
-
-                state.opacity = 0;
-            }, 50);
-        };
-    }
-
-    return {
-        html: html`
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
-        `,
-        sibling: {
-            attributes: events
-        }
-    };
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hide?: boolean }) => {
+    let active = false,
+        events: Record<string, Function> = {
+            onmouseover: function (this: HTMLElement) {
+                let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
+
+                active = true;
+
+                state.height = offsetHeight;
+                state.left = offsetLeft;
+                state.opacity = 1;
+                state.top = offsetTop;
+                state.width = offsetWidth;
+            }
+        },
+        state = reactive({
+            height: null as number | null,
+            hide: true,
+            left: 0,
+            opacity: 0,
+            top: 0,
+            width: 0
+        });
+
+    if (hide === true) {
+        events.onmouseout = () => {
+            active = false;
+            setTimeout(() => {
+                if (active === true) {
+                    return;
+                }
+
+                state.opacity = 0;
+            }, 50);
+        };
+    }
+
+    return {
+        html: html`
+            <div class='magnet' style='${() => `
+                height: ${state.height ? `${state.height}px` : '100%'};
+                opacity: ${state.opacity};
+                transform: translate(${state.left}px, ${state.top}px);
+                width: ${state.width}px;
+            `}' ${attributes}></div>
+        `,
+        sibling: {
+            attributes: events
+        }
+    };
 };

package/src/components/magnet/scss/index.scss

@@ -1,16 +1,16 @@
-@use '/lib';
-
-.magnet {
-    @include lib.position(absolute, 0 null null 0);
-    background: var(--background);
-    border-radius: var(--border-radius);
-    height: 0;
-    opacity: 0;
-    transition:
-        height var(--transition-duration) var(--timing-function),
-        opacity var(--transition-duration) var(--timing-function),
-        transform var(--transition-duration) var(--timing-function),
-        width var(--transition-duration) var(--timing-function);
-    width: 0;
-    z-index: -1;
-}
+@use '/lib';
+
+.magnet {
+    @include lib.position(absolute, 0 null null 0);
+    background: var(--background);
+    border-radius: var(--border-radius);
+    height: 0;
+    opacity: 0;
+    transition:
+        height var(--transition-duration) var(--timing-function),
+        opacity var(--transition-duration) var(--timing-function),
+        transform var(--transition-duration) var(--timing-function),
+        width var(--transition-duration) var(--timing-function);
+    width: 0;
+    z-index: -1;
+}