@esportsplus/ui 0.5.2 → 0.5.4

package/src/components/site/index.ts

@@ -1,27 +1,27 @@
-import { html } from '@esportsplus/template';
-import { onclick } from '~/components/root';
-import scrollbar from '~/components/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 '~/components/root';
+import scrollbar from '~/components/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>
+    `;
 };

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

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

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

@@ -1,9 +1,9 @@
-.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);
-}
+.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/scss/index.scss

@@ -1,7 +1,7 @@
-.thumbnail {
-    background: var(--background);
-    border-radius: var(--border-radius);
-    height: var(--height);
-    position: relative;
-    width: var(--width);
-}
+.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,85 @@
-import { reactive } from '@esportsplus/reactivity';
-import root from '~/components/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 '~/components/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;
+        }
+    };
+};
+
+
 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);
+        }
+    }
+}

package/src/components/tooltip/scss/_east.scss

@@ -1,34 +1,34 @@
-@mixin east($active) {
-    &--en,
-    &--es {
-        left: calc(100% - var(--spacer));
-        position: absolute;
-        transform: scale(var(--scaleX), var(--scaleY));
-
-        #{$active} {
-            transform: translateX(calc(var(--spacer) * 2));
-        }
-    }
-
-    &--e {
-        bottom: 50%;
-        left: calc(100% - var(--spacer));
-        position: absolute;
-        transform: translateY(50%) scaleX(var(--scaleX));
-        transform-origin: center left;
-
-        #{$active} {
-            transform: translate(calc(var(--spacer) * 2), 50%) scale(1);
-        }
-    }
-
-    &--en {
-        top: 0;
-        transform-origin: top left;
-    }
-
-    &--es {
-        bottom: 0;
-        transform-origin: bottom left;
-    }
-}
+@mixin east($active) {
+    &--en,
+    &--es {
+        left: calc(100% - var(--spacer));
+        position: absolute;
+        transform: scale(var(--scaleX), var(--scaleY));
+
+        #{$active} {
+            transform: translateX(calc(var(--spacer) * 2));
+        }
+    }
+
+    &--e {
+        bottom: 50%;
+        left: calc(100% - var(--spacer));
+        position: absolute;
+        transform: translateY(50%) scaleX(var(--scaleX));
+        transform-origin: center left;
+
+        #{$active} {
+            transform: translate(calc(var(--spacer) * 2), 50%) scale(1);
+        }
+    }
+
+    &--en {
+        top: 0;
+        transform-origin: top left;
+    }
+
+    &--es {
+        bottom: 0;
+        transform-origin: bottom left;
+    }
+}

package/src/components/tooltip/scss/_north.scss

@@ -1,34 +1,34 @@
-@mixin north($active) {
-    &--ne,
-    &--nw {
-        bottom: calc(100% - var(--spacer));
-        position: absolute;
-        transform: scale(var(--scaleX), var(--scaleY));
-
-        #{$active} {
-            transform: translateY(calc(var(--spacer) * -2));
-        }
-    }
-
-    &--n {
-        bottom: calc(100% - var(--spacer));
-        position: absolute;
-        right: 50%;
-        transform: translateX(50%) scaleY(var(--scaleY));
-        transform-origin: center bottom;
-
-        #{$active} {
-            transform: translate(50%, calc(var(--spacer) * -2)) scale(1);
-        }
-    }
-
-    &--ne {
-        right: 0;
-        transform-origin: bottom right;
-    }
-
-    &--nw {
-        left: 0;
-        transform-origin: bottom left;
-    }
-}
+@mixin north($active) {
+    &--ne,
+    &--nw {
+        bottom: calc(100% - var(--spacer));
+        position: absolute;
+        transform: scale(var(--scaleX), var(--scaleY));
+
+        #{$active} {
+            transform: translateY(calc(var(--spacer) * -2));
+        }
+    }
+
+    &--n {
+        bottom: calc(100% - var(--spacer));
+        position: absolute;
+        right: 50%;
+        transform: translateX(50%) scaleY(var(--scaleY));
+        transform-origin: center bottom;
+
+        #{$active} {
+            transform: translate(50%, calc(var(--spacer) * -2)) scale(1);
+        }
+    }
+
+    &--ne {
+        right: 0;
+        transform-origin: bottom right;
+    }
+
+    &--nw {
+        left: 0;
+        transform-origin: bottom left;
+    }
+}

package/src/components/tooltip/scss/_south.scss

@@ -1,35 +1,35 @@
-@mixin south($active) {
-    &--se,
-    &--sw {
-        position: absolute;
-        top: calc(100% - var(--spacer));
-        transform: scale(var(--scaleX), var(--scaleY));
-
-        #{$active} {
-            transform: translateY(calc(var(--spacer) * 2));
-        }
-    }
-
-    &--s {
-        position: absolute;
-        right: 50%;
-        top: calc(100% - var(--spacer));
-        transform: translateX(50%) scaleY(var(--scaleY));
-        transform-origin: center top;
-
-        #{$active} {
-            transform: translate(50%, calc(var(--spacer) * 2)) scale(1);
-        }
-    }
-
-    &--se {
-        right: 0;
-        transform-origin: top right;
-    }
-
-    &--sw {
-        left: 0;
-        transform-origin: top left;
-    }
-
-}
+@mixin south($active) {
+    &--se,
+    &--sw {
+        position: absolute;
+        top: calc(100% - var(--spacer));
+        transform: scale(var(--scaleX), var(--scaleY));
+
+        #{$active} {
+            transform: translateY(calc(var(--spacer) * 2));
+        }
+    }
+
+    &--s {
+        position: absolute;
+        right: 50%;
+        top: calc(100% - var(--spacer));
+        transform: translateX(50%) scaleY(var(--scaleY));
+        transform-origin: center top;
+
+        #{$active} {
+            transform: translate(50%, calc(var(--spacer) * 2)) scale(1);
+        }
+    }
+
+    &--se {
+        right: 0;
+        transform-origin: top right;
+    }
+
+    &--sw {
+        left: 0;
+        transform-origin: top left;
+    }
+
+}

package/src/components/tooltip/scss/_west.scss

@@ -1,34 +1,34 @@
-@mixin west($active) {
-    &--wn,
-    &--ws {
-        position: absolute;
-        right: calc(100% - var(--spacer));
-        transform: scale(var(--scale));
-
-        #{$active} {
-            transform: translateX(calc(var(--spacer) * -2));
-        }
-    }
-
-    &--w {
-        bottom: 50%;
-        position: absolute;
-        right: calc(100% - var(--spacer));
-        transform: translateY(50%) scaleX(var(--scaleX));
-        transform-origin: center right;
-
-        #{$active} {
-            transform: translate(calc(var(--spacer) * -2), 50%) scale(1);
-        }
-    }
-
-    &--wn {
-        top: 0;
-        transform-origin: top right;
-    }
-
-    &--ws {
-        bottom: 0;
-        transform-origin: bottom right;
-    }
-}
+@mixin west($active) {
+    &--wn,
+    &--ws {
+        position: absolute;
+        right: calc(100% - var(--spacer));
+        transform: scale(var(--scale));
+
+        #{$active} {
+            transform: translateX(calc(var(--spacer) * -2));
+        }
+    }
+
+    &--w {
+        bottom: 50%;
+        position: absolute;
+        right: calc(100% - var(--spacer));
+        transform: translateY(50%) scaleX(var(--scaleX));
+        transform-origin: center right;
+
+        #{$active} {
+            transform: translate(calc(var(--spacer) * -2), 50%) scale(1);
+        }
+    }
+
+    &--wn {
+        top: 0;
+        transform-origin: top right;
+    }
+
+    &--ws {
+        bottom: 0;
+        transform-origin: bottom right;
+    }
+}