@esportsplus/ui 0.8.4 → 0.9.0

package/src/components/index.ts

@@ -1,19 +1,38 @@
-export { default as accordion } from './accordion';
-export { default as clipboard } from './clipboard';
-export { default as counter } from './counter';
-export { default as ellipsis } from './ellipsis';
-export { default as footer } from './footer';
-export { default as form } from './form';
-export { default as json } from './json';
-export { default as link } from './link';
-export { default as loader } from './loader';
-export { default as loading } from './loading';
-export { default as magnet } from './magnet';
-export { default as number } from './number';
-export { default as page } from './page';
-export { default as root } from './root';
-export { default as scrollbar } from './scrollbar';
-export { default as site } from './site';
-export { default as tooltip } from './tooltip';
-export { default as truncate } from './truncate';
-export { default as typewriter } from './typewriter';
+export * as accordion from './accordion';
+export * as anchor from './anchor';
+export * as banner from './banner';
+export * as border from './border';
+export * as bubble from './bubble';
+export * as button from './button';
+export * as card from './card';
+export * as clipboard from './clipboard';
+export * as container from './container';
+export * as counter from './counter';
+export * as ellipsis from './ellipsis';
+export * as field from './field';
+export * as footer from './footer';
+export * as form from './form';
+export * as frame from './frame';
+export * as grid from './grid';
+export * as group from './group';
+export * as highlight from './highlight';
+export * as icon from './icon';
+export * as json from './json';
+export * as link from './link';
+export * as loader from './loader';
+export * as loading from './loading';
+export * as magnet from './magnet';
+export * as modal from './modal';
+export * as normalize from './normalize';
+export * as number from './number';
+export * as page from './page';
+export * as root from './root';
+export * as row from './row';
+export * as scrollbar from './scrollbar';
+export * as sidebar from './sidebar';
+export * as site from './site';
+export * as text from './text';
+export * as thumbnail from './thumbnail';
+export * as tooltip from './tooltip';
+export * as truncate from './truncate';
+export * as typewriter from './typewriter';

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/hover.ts

@@ -1,19 +1,19 @@
-import { html } from '@esportsplus/template';
-
-
-export default ({ attributes, content }: { attributes?: Record<string, any>, content: any }) => {
-    return {
-        attributes: {
-            class: 'link--hover'
-        },
-        content: html`
-            <span class='link-hover link-hover--one' ${attributes}>
-                ${content}
-            </span>
-
-            <span class='link-hover link-hover--two' ${attributes}>
-                ${content}
-            </span>
-        `
-    };
+import { html } from '@esportsplus/template';
+
+
+export default ({ attributes, content }: { attributes?: Record<string, any>, content: any }) => {
+    return {
+        attributes: {
+            class: 'link--hover'
+        },
+        html: html`
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
+        `
+    };
 };

package/src/components/link/index.ts

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

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

@@ -1,65 +1,66 @@
-@use '/lib';
-@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);
-
-
-    &--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;
-        }
-    }
-
-
-    &-hover {
-        transition: opacity 0.3s ease-in-out, 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-
-        &--one {
-            transform: translateY(0);
-        }
-
-        &--two {
-            @include lib.position(absolute, center);
-            opacity: 0;
-            padding: 0 var(--padding-horizontal);
-            transform: translate(50%, 125%);
-            white-space: nowrap;
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+@use './variables.scss';
+
+.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);
+
+
+    &--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;
+        }
+    }
+
+
+    &-hover {
+        transition: opacity 0.3s ease-in-out, 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
+
+        &--one {
+            transform: translateY(0);
+        }
+
+        &--two {
+            @include lib.position(absolute, center);
+            opacity: 0;
+            padding: 0 var(--padding-horizontal);
+            transform: translate(50%, 125%);
+            white-space: nowrap;
+        }
+    }
+}

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/loader/index.ts

@@ -1,35 +1,43 @@
-import { html } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-
-
-export default ({ attributes, content }: { attributes?: Record<PropertyKey, unknown>, content: any }) => {
-    let state = reactive({
-            load: false,
-            scale: false
-        });
-
-    setTimeout(() => {
-        state.scale = true;
-    }, 300);
-
-    return html`
-        <div class="loader ${() => state.load && 'loader--load'}">
-            <div class="loader ${() => state.load && 'loader--load'}">
-                <div class="loader-content">
-                    <div
-                        class="loader-logo ${() => state.scale && 'loader-logo--scale'} 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>
-    `;
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+export default ({ attributes, content }: { attributes?: Record<PropertyKey, unknown>, content: any }) => {
+    let state = reactive({
+            load: false,
+            scale: false
+        });
+
+    setTimeout(() => {
+        state.scale = true;
+    }, 300);
+
+    return html`
+        <div class='loader ${() => state.load && 'loader--load'}'>
+            <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>
+    `;
 }

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

@@ -1,69 +1,71 @@
-.loader {
-    background-color: var(--color-black-500);
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    opacity: 1;
-    pointer-events: none;
-    right: 0;
-    top: 0;
-    transition: all 0.3s ease-in-out;
-    visibility: visible;
-    z-index: 9999;
-
-
-    &--load {
-        animation: 0.6s 0.2s ease-in-out 1 both move;
-
-        & & {
-            animation: 0.6s ease-in-out 1 both move;
-        }
-    }
-
-
-    @keyframes move {
-        0% {
-            transform: translateY(0);
-        }
-        80% {
-            transform: translateY(-102%);
-        }
-        100% {
-            transform: translateY(-102%);
-        }
-    }
-
-
-    & & {
-        background-color: var(--color-black-400);
-    }
-
-    &-content {
-        bottom: auto;
-        left: 50%;
-        position: absolute;
-        right: auto;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-    }
-
-    &-logo {
-        color: white;
-
-        &--scale {
-            animation: scale 0.32s 1;
-            animation-fill-mode: both;
-
-            @keyframes scale {
-                from {
-                    opacity: 1;
-                    transform: scale3d(1, 1, 1);
-                }
-                to {
-                    opacity: 0;
-                    transform: scale3d(1.8, 1.8, 1.8);
-                }
-            }
-        }
-    }
+@use './variables.scss';
+
+.loader {
+    background-color: var(--color-black-500);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    opacity: 1;
+    pointer-events: none;
+    right: 0;
+    top: 0;
+    transition: all 0.3s ease-in-out;
+    visibility: visible;
+    z-index: 9999;
+
+
+    &--load {
+        animation: 0.6s 0.2s ease-in-out 1 both move;
+
+        & & {
+            animation: 0.6s ease-in-out 1 both move;
+        }
+    }
+
+
+    @keyframes move {
+        0% {
+            transform: translateY(0);
+        }
+        80% {
+            transform: translateY(-102%);
+        }
+        100% {
+            transform: translateY(-102%);
+        }
+    }
+
+
+    & & {
+        background-color: var(--color-black-400);
+    }
+
+    &-content {
+        bottom: auto;
+        left: 50%;
+        position: absolute;
+        right: auto;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
+
+    &-logo {
+        color: white;
+
+        &--scale {
+            animation: scale 0.32s 1;
+            animation-fill-mode: both;
+
+            @keyframes scale {
+                from {
+                    opacity: 1;
+                    transform: scale3d(1, 1, 1);
+                }
+                to {
+                    opacity: 0;
+                    transform: scale3d(1.8, 1.8, 1.8);
+                }
+            }
+        }
+    }
 }

package/src/components/loader/scss/variables.scss

@@ -1,6 +1,6 @@
-.loader {
-    &-logo{
-        --size: 10svh;
-        --translateY: 8px;
-    }
+.loader {
+    &-logo{
+        --size: 10svh;
+        --translateY: 8px;
+    }
 }

package/src/components/loading/index.ts

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