@esportsplus/ui 0.8.4 → 0.9.0

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

@@ -1,70 +1,72 @@
-// 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-default);
-        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;
-        overflow: hidden;
-        position: relative;
-    }
-
-    &-content {
-        height: 100%;
-        margin-right: calc(var(--scrollbar-width) * -1);
-        overflow-x: hidden;
-        overflow-y: scroll;
-        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;
-            }
-        }
-    }
-}
+@use './variables.scss';
+
+// 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-default);
+        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;
+        overflow: hidden;
+        position: relative;
+    }
+
+    &-content {
+        height: 100%;
+        margin-right: calc(var(--scrollbar-width) * -1);
+        overflow-x: hidden;
+        overflow-y: scroll;
+        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 +1,6 @@
-.scrollbar {
-    --background-default: transparent;
-    --height: 0;
-    --translate: translate3d(0, 0, 0);
-    --width: 4px;
-}
+.scrollbar {
+    --background-default: transparent;
+    --height: 0;
+    --translate: translate3d(0, 0, 0);
+    --width: 4px;
+}

package/src/components/sidebar/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/sidebar/scss/index.scss

@@ -1,49 +1,50 @@
-@use '/lib';
-@use '/tokens';
-
-.sidebar {
-    @include lib.position(absolute, var(--margin-vertical) null var(--margin-vertical) null);
-    cursor: default;
-    height: calc(100% - (var(--margin-vertical) * 2));
-    overflow: hidden;
-    transition:
-        max-width var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    width: min(var(--width), calc(100% - (var(--margin-horizontal) * 2)));
-    z-index: 1;
-
-
-    @include tokens.state(inactive) {
-        input[type='password'] {
-            display: none;
-        }
-    }
-
-
-    &--e {
-        right: var(--margin-horizontal);
-
-        &.sidebar--offscreen {
-            @include tokens.state(inactive) {
-                transform: translateX(var(--width));
-            }
-        }
-    }
-
-    &--w {
-        left: var(--margin-horizontal);
-
-        &.sidebar--offscreen {
-            @include tokens.state(inactive) {
-                transform: translateX(calc(var(--width) * -1));
-            }
-        }
-    }
-
-
-    &-content {
-        flex: 0 0 var(--width-default);
-        width: var(--width-default);
-    }
-}
+@use '/lib';
+@use '/tokens';
+@use './variables.scss';
+
+.sidebar {
+    @include lib.position(absolute, var(--margin-vertical) null var(--margin-vertical) null);
+    cursor: default;
+    height: calc(100% - (var(--margin-vertical) * 2));
+    overflow: hidden;
+    transition:
+        max-width var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    width: min(var(--width), calc(100% - (var(--margin-horizontal) * 2)));
+    z-index: 1;
+
+
+    @include tokens.state(inactive) {
+        input[type='password'] {
+            display: none;
+        }
+    }
+
+
+    &--e {
+        right: var(--margin-horizontal);
+
+        &.sidebar--offscreen {
+            @include tokens.state(inactive) {
+                transform: translateX(var(--width));
+            }
+        }
+    }
+
+    &--w {
+        left: var(--margin-horizontal);
+
+        &.sidebar--offscreen {
+            @include tokens.state(inactive) {
+                transform: translateX(calc(var(--width) * -1));
+            }
+        }
+    }
+
+
+    &-content {
+        flex: 0 0 var(--width-default);
+        width: var(--width-default);
+    }
+}

package/src/components/sidebar/scss/variables.scss

@@ -1,20 +1,20 @@
-@use '/tokens';
-
-.sidebar {
-    --margin-horizontal: 0px;
-    --margin-vertical: 0px;
-    --width: var(--width-default);
-    --width-closed: var(--width-default);
-    --width-default: 320px;
-
-
-    @include tokens.state(default) {
-        --width: var(--width-closed);
-    }
-
-
-    &--floating {
-        --margin-horizontal: var(--size-100);
-        --margin-vertical: var(--size-100);
-    }
-}
+@use '/tokens';
+
+.sidebar {
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
+    --width: var(--width-default);
+    --width-closed: var(--width-default);
+    --width-default: 320px;
+
+
+    @include tokens.state(default) {
+        --width: var(--width-closed);
+    }
+
+
+    &--floating {
+        --margin-horizontal: var(--size-100);
+        --margin-vertical: var(--size-100);
+    }
+}

package/src/components/site/index.ts

@@ -1,27 +1,28 @@
-import { html } from '@esportsplus/template';
-import { onclick } from '../root';
-import scrollbar from '../scrollbar';
-
-
-type Data = {
-    attributes?: Record<string, unknown>;
-    content?: any;
-    scrollbar?: Parameters<typeof scrollbar>[0];
-};
-
-
-export default ({ attributes, content, scrollbar: sb }: Data) => {
-    sb ??= {};
-    sb.attributes ??= {};
-    sb.attributes.style ??= '--background-default: var(--color-black-400);';
-    sb.fixed ??= true;
-
-    let { html: h, parent } = scrollbar(sb);
-
-    return html`
-        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
-            ${content || ''}
-            ${h}
-        </section>
-    `;
+import { html } from '@esportsplus/template';
+import { onclick } from '../root';
+import scrollbar from '../scrollbar';
+import './scss/index.scss';
+
+
+type Data = {
+    attributes?: Record<string, unknown>;
+    content?: any;
+    scrollbar?: Parameters<typeof scrollbar>[0];
+};
+
+
+export default ({ attributes, content, scrollbar: sb }: Data) => {
+    sb ??= {};
+    sb.attributes ??= {};
+    sb.attributes.style ??= '--background-default: var(--color-black-400);';
+    sb.fixed ??= true;
+
+    let { html: h, parent } = scrollbar(sb);
+
+    return html`
+        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
+            ${content || ''}
+            ${h}
+        </section>
+    `;
 };

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

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

package/src/components/text/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/text/scss/index.scss

@@ -1,9 +1,11 @@
-.text {
-    color: var(--color);
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
-    position: relative;
-    transition: color var(--transition-duration) ease-in-out;
-    width: var(--width);
-}
+@use './variables.scss';
+
+.text {
+    color: var(--color);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+    position: relative;
+    transition: color var(--transition-duration) ease-in-out;
+    width: var(--width);
+}

package/src/components/text/scss/variables.scss

@@ -1,8 +1,8 @@
-.text {
-    --color: var(--color-default);
-    --color-default: inherit;
-    --font-size: var(--font-size-400);
-    --font-weight: var(--font-weight-400);
-    --line-height: var(--line-height-400);
-    --width: auto;
-}
+.text {
+    --color: var(--color-default);
+    --color-default: inherit;
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-400);
+    --line-height: var(--line-height-400);
+    --width: auto;
+}

package/src/components/thumbnail/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/thumbnail/scss/index.scss

@@ -1,7 +1,9 @@
-.thumbnail {
-    background: var(--background);
-    border-radius: var(--border-radius);
-    height: var(--height);
-    position: relative;
-    width: var(--width);
-}
+@use './variables.scss';
+
+.thumbnail {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    height: var(--height);
+    position: relative;
+    width: var(--width);
+}

package/src/components/thumbnail/scss/variables.scss

@@ -1,7 +1,7 @@
-.thumbnail {
-    --background: transparent;
-    --border-radius: var(--border-radius-300);
-    --height: var(--size);
-    --size: var(--size-700);
-    --width: var(--size);
-}
+.thumbnail {
+    --background: transparent;
+    --border-radius: var(--border-radius-300);
+    --height: var(--size);
+    --size: var(--size-700);
+    --width: var(--size);
+}

package/src/components/tooltip/index.ts

@@ -1,85 +1,86 @@
-import { reactive } from '@esportsplus/reactivity';
-import root from '../root';
-
-
-let queue: (VoidFunction | (() => Promise<void>))[] = [],
-    running = false,
-    scheduled = false;
-
-
-async function frame() {
-    if (running) {
-        return;
-    }
-
-    running = true;
-
-    let item;
-
-    while (item = queue.pop()) {
-        await item();
-    }
-
-    running = false;
-}
-
-
-const onclick = (data: { active?: boolean, toggle?: boolean } = {}) => {
-    let state = reactive({
-            active: data.active || false
-        });
-
-    return {
-        attributes: {
-            class: () => {
-                return `tooltip ${state.active ? '--active' : ''}`;
-            },
-            onclick: function(this: HTMLElement, e: Event) {
-                let active = true,
-                    node = e.target as Node | null;
-
-                if (data.toggle && ( this.contains(node) || this.isSameNode(node) )) {
-                    active = !state.active;
-                }
-
-                frame();
-                state.active = active;
-
-                if (active) {
-                    queue.push(() => state.active = false);
-                }
-
-                if (!scheduled) {
-                    root.onclick.add(() => {
-                        frame();
-                        scheduled = false;
-                    });
-                    scheduled = true;
-                }
-            }
-        },
-        state
-    };
-};
-
-const onhover = (active: boolean = false) => {
-    let state = reactive({ active });
-
-    return {
-        attributes: {
-            class: () => `tooltip ${state.active ? '--active' : ''}`,
-            onmouseover: () => {
-                state.active = true;
-            },
-            onmouseout: () => {
-                state.active = false;
-            }
-        },
-        toggle: () => {
-            state.active = !state.active;
-        }
-    };
-};
-
-
+import { reactive } from '@esportsplus/reactivity';
+import root from '../root';
+import './scss/index.scss';
+
+
+let queue: (VoidFunction | (() => Promise<void>))[] = [],
+    running = false,
+    scheduled = false;
+
+
+async function frame() {
+    if (running) {
+        return;
+    }
+
+    running = true;
+
+    let item;
+
+    while (item = queue.pop()) {
+        await item();
+    }
+
+    running = false;
+}
+
+
+const onclick = (data: { active?: boolean, toggle?: boolean } = {}) => {
+    let state = reactive({
+            active: data.active || false
+        });
+
+    return {
+        attributes: {
+            class: () => {
+                return `tooltip ${state.active ? '--active' : ''}`;
+            },
+            onclick: function(this: HTMLElement, e: Event) {
+                let active = true,
+                    node = e.target as Node | null;
+
+                if (data.toggle && ( this.contains(node) || this.isSameNode(node) )) {
+                    active = !state.active;
+                }
+
+                frame();
+                state.active = active;
+
+                if (active) {
+                    queue.push(() => state.active = false);
+                }
+
+                if (!scheduled) {
+                    root.onclick.push(() => {
+                        frame();
+                        scheduled = false;
+                    });
+                    scheduled = true;
+                }
+            }
+        },
+        state
+    };
+};
+
+const onhover = (active: boolean = false) => {
+    let state = reactive({ active });
+
+    return {
+        attributes: {
+            class: () => `tooltip ${state.active ? '--active' : ''}`,
+            onmouseover: () => {
+                state.active = true;
+            },
+            onmouseout: () => {
+                state.active = false;
+            }
+        },
+        toggle: () => {
+            state.active = !state.active;
+        }
+    };
+};
+
+
 export default { onclick, onhover };

package/src/components/tooltip/scss/_center.scss

@@ -1,13 +1,13 @@
-@mixin center($active) {
-    &--c {
-        bottom: 50%;
-        position: absolute;
-        right: 50%;
-        transform: translate(50%, 50%) scale(var(--scaleX), var(--scaleY));
-        transform-origin: center center;
-
-        #{$active} {
-            transform: translate(50%, 50%) scale(1);
-        }
-    }
-}
+@mixin center($active) {
+    &--c {
+        bottom: 50%;
+        position: absolute;
+        right: 50%;
+        transform: translate(50%, 50%) scale(var(--scaleX), var(--scaleY));
+        transform-origin: center center;
+
+        #{$active} {
+            transform: translate(50%, 50%) scale(1);
+        }
+    }
+}