@esportsplus/ui 0.1.8 → 0.2.2

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

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

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 = {
-    class?: string;
-    content?: any;
-    scrollbar?: {
-        style?: string;
-    };
-};
-
-
-export default (data: Data) => {
-    let { attributes: a, html: h } = scrollbar({
-            fixed: true,
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        });
-
-    return html`
-        <section class='site ${data?.class || ''}' onclick='${onclick}' ${a}>
-            ${data?.content || ''}
-            ${h}
-        </section>
-    `;
+import { html } from '@esportsplus/template';
+import { onclick } from '~/components/root';
+import scrollbar from '~/components/scrollbar';
+
+
+type Data = {
+    class?: string;
+    content?: any;
+    scrollbar?: {
+        style?: string;
+    };
+};
+
+
+export default (data: Data) => {
+    let { attributes: a, html: h } = scrollbar({
+            fixed: true,
+            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        });
+
+    return html`
+        <section class='site ${data?.class || ''}' onclick='${onclick}' ${a}>
+            ${data?.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,12 +1,12 @@
-.text {
-    align-items: center;
-    color: var(--color);
-    display: flex;
-    flex-flow: wrap;
-    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 {
+    align-items: center;
+    color: var(--color);
+    display: flex;
+    flex-flow: wrap;
+    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,9 +1,9 @@
-.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);
-    --transition-duration: var(--transition-duration-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);
+    --transition-duration: var(--transition-duration-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,94 +1,94 @@
-import { reactive } from '@esportsplus/reactivity';
-import menu from './menu';
-import root from '~/components/root';
-
-
-let queue: VoidFunction[] = [],
-    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, menu?: Parameters<typeof menu>[0], toggle?: boolean } = {}) => {
-    let content,
-        state = reactive({
-            active: data.active || false,
-            render: undefined as boolean | undefined
-        });
-
-    if (data.menu) {
-        content = menu(data.menu, state);
-    }
-
-    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;
-                }
-            }
-        },
-        content,
-        state
-    };
-};
-
-const onhover = (active: boolean = false) => {
-    let state = reactive({
-            active,
-            render: undefined as boolean | undefined
-        });
-
-    return {
-        attributes: {
-            class: () => `tooltip ${state.active ? '--active' : ''}`,
-            onmouseover: () => {
-                state.active = true;
-            },
-            onmouseout: () => {
-                state.active = false;
-            }
-        },
-        state
-    };
-};
-
-
+import { reactive } from '@esportsplus/reactivity';
+import menu from './menu';
+import root from '~/components/root';
+
+
+let queue: VoidFunction[] = [],
+    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, menu?: Parameters<typeof menu>[0], toggle?: boolean } = {}) => {
+    let content,
+        state = reactive({
+            active: data.active || false,
+            render: undefined as boolean | undefined
+        });
+
+    if (data.menu) {
+        content = menu(data.menu, state);
+    }
+
+    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;
+                }
+            }
+        },
+        content,
+        state
+    };
+};
+
+const onhover = (active: boolean = false) => {
+    let state = reactive({
+            active,
+            render: undefined as boolean | undefined
+        });
+
+    return {
+        attributes: {
+            class: () => `tooltip ${state.active ? '--active' : ''}`,
+            onmouseover: () => {
+                state.active = true;
+            },
+            onmouseout: () => {
+                state.active = false;
+            }
+        },
+        state
+    };
+};
+
+
 export default { onclick, onhover };

package/src/components/tooltip/menu.ts

@@ -1,71 +1,71 @@
-import { effect } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-type Data = {
-    class?: string;
-    direction?: string;
-    items?: {
-        border?: {
-            class?: string;
-        };
-        class?: string;
-        onclick?: (...args: any[]) => void;
-        style?: string;
-        svg?: string;
-        target?: string;
-        text: string;
-        url?: string;
-    }[];
-    state?: { active?: boolean };
-    style?: string;
-};
-
-
-function template(data: Data) {
-    return html`
-        <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-            ${(data?.items || []).map(item => html`
-                ${item?.border ? html`
-                    <div
-                        class="border ${item?.border?.class || ''}"
-                        style='
-                            margin-left: calc(var(--margin-horizontal) * -1);
-                            width: calc(100% + var(--margin-horizontal) * 2);
-                        '
-                    ></div>
-                ` : ''}
-
-                <${item?.url ? 'a' : 'div'}
-                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? html`onclick='${item.onclick}'` : ''}
-                    style='${item?.style || ''}'
-                    ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-                >
-                    ${item?.svg ? html`
-                        <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
-                            ${item.svg}
-                        </div>
-                    ` : ''}
-
-                    <div class="text --color-text --flex-fill">
-                        ${item.text}
-                    </div>
-                </${item?.url ? 'a' : 'div'}>
-            `)}
-        </div>
-    `;
-}
-
-
-// TODO: There's nothing binding activate to tooltip menu ( this is never called outside initial effect run )
-export default (data: Data, state: { active?: boolean, render?: boolean }) => {
-    effect(() => {
-        if (!state.active || state.render) {
-            return;
-        }
-
-        state.render = true;
-    });
-
-    return () => state.render ? template(data) : '';
+import { effect } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+type Data = {
+    class?: string;
+    direction?: string;
+    items?: {
+        border?: {
+            class?: string;
+        };
+        class?: string;
+        onclick?: (...args: any[]) => void;
+        style?: string;
+        svg?: string;
+        target?: string;
+        text: string;
+        url?: string;
+    }[];
+    state?: { active?: boolean };
+    style?: string;
+};
+
+
+function template(data: Data) {
+    return html`
+        <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
+            ${(data?.items || []).map(item => html`
+                ${item?.border ? html`
+                    <div
+                        class="border ${item?.border?.class || ''}"
+                        style='
+                            margin-left: calc(var(--margin-horizontal) * -1);
+                            width: calc(100% + var(--margin-horizontal) * 2);
+                        '
+                    ></div>
+                ` : ''}
+
+                <${item?.url ? 'a' : 'div'}
+                    class='link --flex-vertical ${item?.class}' ${item?.onclick ? html`onclick='${item.onclick}'` : ''}
+                    style='${item?.style || ''}'
+                    ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
+                >
+                    ${item?.svg ? html`
+                        <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
+                            ${item.svg}
+                        </div>
+                    ` : ''}
+
+                    <div class="text --color-text --flex-fill">
+                        ${item.text}
+                    </div>
+                </${item?.url ? 'a' : 'div'}>
+            `)}
+        </div>
+    `;
+}
+
+
+// TODO: There's nothing binding activate to tooltip menu ( this is never called outside initial effect run )
+export default (data: Data, state: { active?: boolean, render?: boolean }) => {
+    effect(() => {
+        if (!state.active || state.render) {
+            return;
+        }
+
+        state.render = true;
+    });
+
+    return () => state.render ? template(data) : '';
 };

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;
+    }
+}