@esportsplus/ui 0.17.6 → 0.18.0

package/src/components/icon/index.ts

@@ -1,11 +1,14 @@
-import { html, svg } from '@esportsplus/template';
+import { html, Attributes, svg } from '@esportsplus/template';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default (attributes: Record<string, unknown>, icon: Parameters<typeof svg.sprite>[0]) => {
-    return html`
-        <div class='icon' ${attributes}>
-            ${svg.sprite(icon)}
-        </div>
-    `;
-};
+export default template.factory<Attributes, Parameters<typeof svg.sprite>[0]>(
+    (attributes, icon) => {
+        return html`
+            <div class='icon' ${attributes}>
+                ${svg.sprite(icon)}
+            </div>
+        `;
+    }
+);

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

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .icon {
     color: var(--color);

package/src/components/index.ts

@@ -18,10 +18,9 @@ export * as group from './group';
 export { default as highlight } from './highlight';
 export { default as icon } from './icon';
 export { default as json } from './json';
-export { default as link } from './link';
+export * as link from './link';
 export * as loader from './loader';
 export { default as loading } from './loading';
-export { default as magnet } from './magnet';
 export * as modal from './modal';
 export { default as number } from './number';
 export { default as overlay } from './overlay';

package/src/components/json/download.ts

@@ -1,4 +1,4 @@
-export default (content: any[] | Record<string, any>, name: string) => {
+export default (content: any[] | Record<PropertyKey, any>, name: string) => {
     let link = document.createElement('a');
 
     link.download = name + '.json';

package/src/components/link/index.ts

@@ -1,5 +1 @@
-import hover from './hover';
-import './scss/index.scss';
-
-
-export default { hover };
+import './scss/index.scss';

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

@@ -1,6 +1,6 @@
 @use '/lib';
 @use '/tokens';
-@use './variables.scss';
+@use 'variables';
 
 .link {
     align-content: center;
@@ -22,25 +22,6 @@
     width: var(--width);
 
 
-    &--hover {
-        &.tooltip,
-        &:not(.--active) {
-            &:hover {
-                .link-hover {
-                    &--one {
-                        opacity: 0;
-                        transform: translateY(-75%);
-                    }
-
-                    &--two {
-                        opacity: 1;
-                        transform: translate(50%, 50%);
-                    }
-                }
-            }
-        }
-    }
-
     &--underline {
         @include tokens.state(active hover) {
             text-decoration: underline;

package/src/components/loader/index.ts

@@ -1,43 +1,45 @@
-import { html } from '@esportsplus/template';
+import { html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default ({ attributes, content }: { attributes?: Record<PropertyKey, unknown>, content: any }) => {
-    let state = reactive({
-            load: false,
-            scale: false
-        });
+export default template.factory<Attributes>(
+    (attributes, content) => {
+        let state = reactive({
+                load: false,
+                scale: false
+            });
 
-    setTimeout(() => {
-        state.scale = true;
-    }, 300);
+        setTimeout(() => {
+            state.scale = true;
+        }, 300);
 
-    return html`
-        <div class='loader ${() => state.load && 'loader--load'}'>
+        return html`
             <div class='loader ${() => state.load && 'loader--load'}'>
-                <div class='loader-content'>
-                    <div
-                        class='
-                            ${() => state.scale && 'loader-logo--scale'}
-                            loader-logo
-                            text
-                            --flex-center
-                            --text-uppercase
-                            --text-600
-                        '
-                        style='color: var(--color-grey-500);'
-                        onanimationend='${({ animationName: name }: AnimationEvent) => {
-                            if (name === 'scale') {
-                                state.load = true;
-                            }
-                        }}'
-                        ${attributes}
-                    >
-                        ${content}
+                <div class='loader ${() => state.load && 'loader--load'}'>
+                    <div class='loader-content'>
+                        <div
+                            class='
+                                ${() => state.scale && 'loader-logo--scale'}
+                                loader-logo
+                                text
+                                --flex-center
+                                --text-uppercase --text-600
+                            '
+                            style='color: var(--color-grey-500);'
+                            onanimationend='${({ animationName: name }: AnimationEvent) => {
+                                if (name === 'scale') {
+                                    state.load = true;
+                                }
+                            }}'
+                            ${attributes}
+                        >
+                            ${content}
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    `;
-}
+        `;
+    }
+);

package/src/components/loader/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .loader {
     background-color: var(--color-black-500);

package/src/components/loading/index.ts

@@ -1,8 +1,8 @@
-import { html } from '@esportsplus/template';
+import { html, Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default (attributes?: Record<PropertyKey, unknown>) => {
+export default (attributes?: Attributes) => {
     return html`
         <div
             class='loading --border-width-700 --size-800'

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

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .loading {
     animation: loading var(--animation-duration) linear infinite;

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

@@ -1,6 +1,6 @@
 @use '/lib';
 @use '/tokens';
-@use './variables.scss';
+@use 'variables';
 
 .modal {
     margin: auto;

package/src/components/overlay/index.ts

@@ -1,14 +1,14 @@
-import { isArray } from '@esportsplus/utilities';
+import { toArray } from '@esportsplus/utilities';
 import scrollbar from '~/components/scrollbar';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-
-    (data.class as unknown[]).push('overlay');
+export default template.factory<Parameters<typeof scrollbar>[0]>(
+    (attributes, content) => {
+        attributes.class = toArray(attributes.class);
+        attributes.class.push('overlay');
 
-    return scrollbar(data, content);
-};
+        return scrollbar(attributes, content);
+    }
+);

package/src/components/page/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .page {
     min-height: 100svh;

package/src/components/root/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 body,
 html {

package/src/components/scrollbar/index.ts

@@ -1,6 +1,7 @@
 import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import { html, type Attributes } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
@@ -8,49 +9,50 @@ let root = document.body,
     width: number | undefined;
 
 
-// TODO: Look into scrollbar customization options
-export default (attributes: Record<string, unknown> & { content?: Record<string, unknown>, scrollbar?: Record<string, unknown> }, content: unknown) => {
-    let state = reactive({
-            height: 100,
-            translate: 0
-        });
+export default template.factory<Attributes & { scrollbar?: Attributes, 'scrollbar-container-content'?: Attributes }>(
+    (attributes, content) => {
+        let state = reactive({
+                height: 100,
+                translate: 0
+            });
 
-    return html`
-        <div
-            class='scrollbar-container'
-            ${omit(attributes, ['content', 'scrollbar'])}
-        >
+        return html`
             <div
-                class='scrollbar-container-content'
-                onscroll='${function(this: HTMLElement) {
-                    if (width === undefined) {
-                        width = this.offsetWidth - this.clientWidth;
-
-                        if (width && width !== 17) {
-                            root.style.setProperty('--scrollbar-width', `${width}px`);
-                        }
-                    }
-
-                    state.height = (this.clientHeight / this.scrollHeight) * 100;
-                    state.translate = (this.scrollTop / this.clientHeight) * 100;
-                }}'
-                ${attributes.content}
+                class='scrollbar-container'
+                ${omit(attributes, ['scrollbar-container-content', 'scrollbar'])}
             >
-                ${content}
-            </div>
+                <div
+                    class='scrollbar-container-content'
+                    onscroll='${function(this: HTMLElement) {
+                        if (width === undefined) {
+                            width = this.offsetWidth - this.clientWidth;
+
+                            if (width && width !== 17) {
+                                root.style.setProperty('--scrollbar-width', `${width}px`);
+                            }
+                        }
 
-            <div
-                class='
-                    ${() => state.height >= 100 && 'scrollbar--hidden'}
-                    scrollbar
-                '
-                style='${() => `
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-                ${attributes.scrollbar}
-            >
+                        state.height = (this.clientHeight / this.scrollHeight) * 100;
+                        state.translate = (this.scrollTop / this.clientHeight) * 100;
+                    }}'
+                    ${attributes['scrollbar-container-content']}
+                >
+                    ${content}
+                </div>
+
+                <div
+                    class='
+                        ${() => state.height >= 100 && 'scrollbar--hidden'}
+                        scrollbar
+                    '
+                    style='${() => `
+                        --translate: translate3d(0, ${state.translate}%, 0);
+                        --height: ${state.height}%;
+                    `}'
+                    ${attributes.scrollbar}
+                >
+                </div>
             </div>
-        </div>
-    `;
-};
+        `;
+    }
+);

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

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 // Hide Chrome Mobile Scrollbar
 ::-webkit-scrollbar,

package/src/components/scrollbar/scss/variables.scss

@@ -1,5 +1,5 @@
 .scrollbar {
-    --background: transparent;
+    --background: var(--color-black-300);
     --height: 0;
     --translate: translate3d(0, 0, 0);
     --width: 4px;

package/src/components/sidebar/index.ts

@@ -1,14 +1,14 @@
-import { isArray } from '@esportsplus/utilities';
+import { toArray } from '@esportsplus/utilities';
 import scrollbar from '~/components/scrollbar';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-
-    (data.class as unknown[]).push('sidebar');
+export default template.factory<Parameters<typeof scrollbar>[0]>(
+    (attributes, content) => {
+        attributes.class = toArray(attributes.class);
+        attributes.class.push('sidebar');
 
-    return scrollbar(data, content);
-};
+        return scrollbar(attributes, content);
+    }
+);

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

@@ -1,6 +1,6 @@
 @use '/lib';
 @use '/tokens';
-@use './variables.scss';
+@use 'variables';
 
 .sidebar {
     @include lib.position(absolute, var(--margin-vertical) null var(--margin-vertical) null);

package/src/components/site/index.ts

@@ -1,19 +1,19 @@
-import { isArray } from '@esportsplus/utilities';
+import { toArray } from '@esportsplus/utilities';
 import { onclick } from '~/components/root';
 import scrollbar from '~/components/scrollbar';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
-export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
-    data.style ??= '--background-default: var(--color-black-400);';
+export default template.factory<Parameters<typeof scrollbar>[0]>(
+    (attributes, content) => {
+        attributes.class = toArray(attributes.class);
+        attributes.class.push('site');
 
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-
-    (data.class as unknown[]).push('site');
+        attributes.onclick = onclick;
 
-    data.onclick = onclick;
+        attributes.style ??= '--background-default: var(--color-black-400);';
 
-    return scrollbar(data, content);
-};
+        return scrollbar(attributes, content);
+    }
+);

package/src/components/template/index.ts

@@ -0,0 +1,26 @@
+import { Renderable } from '@esportsplus/template';
+
+
+const factory = <A extends Record<string, unknown>, C = unknown>(template: (attributes: A, content: C) => Renderable) => {
+    function factory(content: C): Renderable;
+    function factory(attributes: A, content: C): Renderable;
+    function factory(one: A | C, two?: C): Renderable {
+        let content: C,
+            attributes: A = {} as A;
+
+        if (two === undefined) {
+            content = one as C;
+        }
+        else {
+            content = two;
+            attributes = one as A;
+        }
+
+        return template(attributes, content);
+    }
+
+    return factory;
+};
+
+
+export default { factory };

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

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .text {
     color: var(--color);

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

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .thumbnail {
     background: var(--background);