@esportsplus/ui 0.8.4 → 0.9.0

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

@@ -1,17 +1,19 @@
-.loading {
-    animation: Loading var(--animation-duration) linear infinite;
-    border: var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);
-    border-left-color: var(--border-color);
-    border-radius: 100%;
-    height: var(--size);
-    width: var(--size);
-}
-
-@keyframes Loading {
-    0% {
-        transform: rotate(0deg)
-    }
-    100% {
-        transform: rotate(360deg)
-    }
+@use './variables.scss';
+
+.loading {
+    animation: loading var(--animation-duration) linear infinite;
+    border: var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);
+    border-left-color: var(--border-color);
+    border-radius: 100%;
+    height: var(--size);
+    width: var(--size);
+}
+
+@keyframes loading {
+    0% {
+        transform: rotate(0deg)
+    }
+    100% {
+        transform: rotate(360deg)
+    }
 }

package/src/components/loading/scss/variables.scss

@@ -1,6 +1,6 @@
-.loading {
-    --animation-duration: 0.64s;
-    --border-color: var(--color);
-    --border-width: var(--border-width-400);
-    --size: var(--size-400);
+.loading {
+    --animation-duration: 0.64s;
+    --border-color: var(--color);
+    --border-width: var(--border-width-400);
+    --size: var(--size-400);
 }

package/src/components/magnet/index.ts

@@ -1,55 +1,56 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hide?: boolean }) => {
-    let active = false,
-        events: Record<string, Function> = {
-            onmouseover: function (this: HTMLElement) {
-                let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
-
-                active = true;
-
-                state.height = offsetHeight;
-                state.left = offsetLeft;
-                state.opacity = 1;
-                state.top = offsetTop;
-                state.width = offsetWidth;
-            }
-        },
-        state = reactive({
-            height: null as number | null,
-            hide: true,
-            left: 0,
-            opacity: 0,
-            top: 0,
-            width: 0
-        });
-
-    if (hide === true) {
-        events.onmouseout = () => {
-            active = false;
-            setTimeout(() => {
-                if (active === true) {
-                    return;
-                }
-
-                state.opacity = 0;
-            }, 50);
-        };
-    }
-
-    return {
-        html: html`
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
-        `,
-        sibling: {
-            attributes: events
-        }
-    };
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hide?: boolean }) => {
+    let active = false,
+        events: Record<string, Function> = {
+            onmouseover: function (this: HTMLElement) {
+                let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
+
+                active = true;
+
+                state.height = offsetHeight;
+                state.left = offsetLeft;
+                state.opacity = 1;
+                state.top = offsetTop;
+                state.width = offsetWidth;
+            }
+        },
+        state = reactive({
+            height: null as number | null,
+            hide: true,
+            left: 0,
+            opacity: 0,
+            top: 0,
+            width: 0
+        });
+
+    if (hide === true) {
+        events.onmouseout = () => {
+            active = false;
+            setTimeout(() => {
+                if (active === true) {
+                    return;
+                }
+
+                state.opacity = 0;
+            }, 50);
+        };
+    }
+
+    return {
+        html: html`
+            <div class='magnet' style='${() => `
+                height: ${state.height ? `${state.height}px` : '100%'};
+                opacity: ${state.opacity};
+                transform: translate(${state.left}px, ${state.top}px);
+                width: ${state.width}px;
+            `}' ${attributes}></div>
+        `,
+        sibling: {
+            attributes: events
+        }
+    };
 };

package/src/components/magnet/scss/index.scss

@@ -1,16 +1,17 @@
-@use '/lib';
-
-.magnet {
-    @include lib.position(absolute, 0 null null 0);
-    background: var(--background);
-    border-radius: var(--border-radius);
-    height: 0;
-    opacity: 0;
-    transition:
-        height var(--transition-duration) var(--timing-function),
-        opacity var(--transition-duration) var(--timing-function),
-        transform var(--transition-duration) var(--timing-function),
-        width var(--transition-duration) var(--timing-function);
-    width: 0;
-    z-index: -1;
-}
+@use '/lib';
+@use './variables.scss';
+
+.magnet {
+    @include lib.position(absolute, 0 null null 0);
+    background: var(--background);
+    border-radius: var(--border-radius);
+    height: 0;
+    opacity: 0;
+    transition:
+        height var(--transition-duration) var(--timing-function),
+        opacity var(--transition-duration) var(--timing-function),
+        transform var(--transition-duration) var(--timing-function),
+        width var(--transition-duration) var(--timing-function);
+    width: 0;
+    z-index: -1;
+}

package/src/components/magnet/scss/variables.scss

@@ -1,5 +1,5 @@
-.magnet {
-    --background: transparent;
-    --border-radius: var(--border-radius-400);
-    --timing-function: var(--timing-circ);
+.magnet {
+    --background: transparent;
+    --border-radius: var(--border-radius-400);
+    --timing-function: var(--timing-circ);
 }

package/src/components/modal/index.ts

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

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

@@ -1,35 +1,36 @@
-@use '/lib';
-@use '/tokens';
-
-.modal {
-    @include lib.position(fixed, center);
-    max-height: var(--max-height);
-    overflow: hidden;
-    transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    transform-origin: center;
-    width: min(var(--max-width), calc(100svw - (var(--margin-horizontal) * 2)));
-    z-index: 2;
-
-    @include tokens.state(inactive) {
-        opacity: 0;
-        pointer-events: none;
-        transform: translate(50%, 50%) scale(0.8);
-
-        input[type='password'] {
-            display: none;
-        }
-    }
-
-    &-frame {
-        transition:
-            opacity var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
-        transform-origin: center;
-
-        @include tokens.state(inactive) {
-            display: none;
-        }
-    }
+@use '/lib';
+@use '/tokens';
+@use './variables.scss';
+
+.modal {
+    @include lib.position(fixed, center);
+    max-height: var(--max-height);
+    overflow: hidden;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    transform-origin: center;
+    width: min(var(--max-width), calc(100svw - (var(--margin-horizontal) * 2)));
+    z-index: 2;
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+        pointer-events: none;
+        transform: translate(50%, 50%) scale(0.8);
+
+        input[type='password'] {
+            display: none;
+        }
+    }
+
+    &-frame {
+        transition:
+            opacity var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
+        transform-origin: center;
+
+        @include tokens.state(inactive) {
+            display: none;
+        }
+    }
 }

package/src/components/modal/scss/variables.scss

@@ -1,6 +1,6 @@
-.modal {
-    --margin-horizontal: 0px;
-    --margin-vertical: 0px;
-    --max-height: calc(100svh - (var(--margin-vertical) * 2));
-    --max-width: 320px;
-}
+.modal {
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
+    --max-height: calc(100svh - (var(--margin-vertical) * 2));
+    --max-width: 320px;
+}

package/src/components/normalize/index.ts

@@ -0,0 +1 @@
+import 'modern-normalize/modern-normalize.css';

package/src/components/number/index.ts

@@ -1,24 +1,4 @@
-let formatter: null | Intl.NumberFormat = null,
-    suffixes = ['th', 'st', 'nd', 'rd'];
-
-
-const abbreviate = (number: number) => {
-    if (formatter === null) {
-        formatter = new Intl.NumberFormat('en-GB', {
-            notation: 'compact',
-            compactDisplay: 'short'
-        });
-    }
-
-    return formatter.format(number);
-};
-
-const ordinal = (number: number) => {
-    let value = number % 100;
-
-    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
-};
-
-
-export default { abbreviate, ordinal };
-export { abbreviate, ordinal };
+import { number } from '@esportsplus/utilities';
+
+
+export default number;

package/src/components/page/index.ts

@@ -1,15 +1,17 @@
-const subtitle = {
-    class: 'page-subtitle --margin-200 --text-crop-bottom'
-};
-
-const suptitle = {
-    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
-};
-
-const title = {
-    class: 'page-title --line-height-200 --margin-400 --text-crop'
-};
-
-
-export default { subtitle, suptitle, title };
-export { subtitle, suptitle, title };
+import './scss/index.scss';
+
+
+const subtitle = {
+    class: 'page-subtitle --margin-200 --text-crop-bottom'
+};
+
+const suptitle = {
+    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
+};
+
+const title = {
+    class: 'page-title --line-height-200 --margin-400 --text-crop'
+};
+
+
+export default { subtitle, suptitle, title };

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

@@ -1,31 +1,33 @@
-.page {
-    min-height: 100svh;
-    position: relative;
-    width: 100vw;
-
-
-    &-subtitle,
-    &-suptitle,
-    &-title {
-        color: var(--color);
-        display: block;
-        line-height: var(--line-height);
-        position: relative;
-        width: 100%;
-        z-index: 1;
-    }
-
-    &-subtitle,
-    &-suptitle {
-        font-size: var(--font-size);
-    }
-
-    &-suptitle + &-title,
-    &-title + &-subtitle {
-        margin-top: var(--margin-vertical);
-    }
-
-    &-title {
-        text-wrap: balance;
-    }
-}
+@use './variables.scss';
+
+.page {
+    min-height: 100svh;
+    position: relative;
+    width: 100vw;
+
+
+    &-subtitle,
+    &-suptitle,
+    &-title {
+        color: var(--color);
+        display: block;
+        line-height: var(--line-height);
+        position: relative;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-subtitle,
+    &-suptitle {
+        font-size: var(--font-size);
+    }
+
+    &-suptitle + &-title,
+    &-title + &-subtitle {
+        margin-top: var(--margin-vertical);
+    }
+
+    &-title {
+        text-wrap: balance;
+    }
+}

package/src/components/page/scss/variables.scss

@@ -1,15 +1,15 @@
-.page {
-    &-subtitle,
-    &-suptitle {
-        --color: var(--color-default);
-        --color-default: var(--color-text-400);
-        --font-size: var(--font-size-400);
-        --line-height: var(--line-height-400);
-    }
-
-    &-title {
-        --color: var(--color-default);
-        --color-default: var(--color-text-500);
-        --line-height: var(--line-height-400);
-    }
-}
+.page {
+    &-subtitle,
+    &-suptitle {
+        --color: var(--color-default);
+        --color-default: var(--color-text-400);
+        --font-size: var(--font-size-400);
+        --line-height: var(--line-height-400);
+    }
+
+    &-title {
+        --color: var(--color-default);
+        --color-default: var(--color-text-500);
+        --line-height: var(--line-height-400);
+    }
+}

package/src/components/root/index.ts

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

package/src/components/root/onclick.ts

@@ -1,21 +1,21 @@
-let queue: (VoidFunction | (() => Promise<void>))[] = [];
-
-
-const onclick = async () => {
-    if (queue.length === 0) {
-        return;
-    }
-
-    let item;
-
-    while (item = queue.pop()) {
-        await item();
-    }
-};
-
-onclick.add = (fn: VoidFunction) => {
-    queue.push(fn);
-};
-
-
+let queue: (VoidFunction | (() => Promise<void>))[] = [];
+
+
+const onclick = async () => {
+    if (queue.length === 0) {
+        return;
+    }
+
+    let item;
+
+    while (item = queue.pop()) {
+        await item();
+    }
+};
+
+onclick.push = (fn: VoidFunction) => {
+    queue.push(fn);
+};
+
+
 export default onclick;