@esportsplus/ui 0.5.4 → 0.5.6

package/.editorconfig

@@ -1,9 +1,9 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-end_of_line = lf
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.gitattributes

@@ -1,2 +1,2 @@
-# Auto detect text files and perform LF normalization
-* text=auto
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/dependabot.yml

@@ -1,23 +1,23 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-registries:
-  npm-npmjs:
-    token: ${{secrets.NPM_TOKEN}}
-    type: npm-registry
-    url: https://registry.npmjs.org
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-      development-dependencies:
-        dependency-type: "development"
-    registries:
-      - npm-npmjs
-    schedule:
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+registries:
+  npm-npmjs:
+    token: ${{secrets.NPM_TOKEN}}
+    type: npm-registry
+    url: https://registry.npmjs.org
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    groups:
+      production-dependencies:
+        dependency-type: "production"
+      development-dependencies:
+        dependency-type: "development"
+    registries:
+      - npm-npmjs
+    schedule:
       interval: "daily"

package/.github/workflows/bump.yml

@@ -1,7 +1,7 @@
-name: bump
-on:
-  push:
-    branches: '**' # only trigger on branches, not on tags
-jobs:
-  bump:
+name: bump
+on:
+  push:
+    branches: '**' # only trigger on branches, not on tags
+jobs:
+  bump:
     uses: esportsplus/workflows/.github/workflows/bump.yml@main

package/.github/workflows/publish.yml

@@ -1,14 +1,14 @@
-name: publish to npm
-on:
-  release:
-    types: [published]
-  workflow_dispatch:
-  workflow_run:
-    workflows: [bump]
-    types:
-      - completed
-jobs:
-  publish:
-    secrets:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
+name: publish to npm
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+  workflow_run:
+    workflows: [bump]
+    types:
+      - completed
+jobs:
+  publish:
+    secrets:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
     uses: esportsplus/workflows/.github/workflows/publish.yml@main

package/build/components/aurora/index.js

@@ -1,12 +1,12 @@
 import { html } from '@esportsplus/template';
-export default ({ backgrounds, blur, opacity, scale }) => html `
+export default ({ backgrounds, blur, opacity, scale }) => html `
     <div class="aurora" ${{
     style: {
         '--blur': blur || '50px',
         '--opacity': opacity || 0.8,
         '--scale': scale || 1
     }
-}}>
-        ${backgrounds.map((bg) => html `<div style='${`--background-color: ${bg}`}'></div>`)}
-    </div>
+}}>
+        ${backgrounds.map((bg) => html `<div style='${`--background-color: ${bg}`}'></div>`)}
+    </div>
 `;

package/build/components/counter/index.js

@@ -39,8 +39,8 @@ export default ({ currency, delay, max, suffix, value }) => {
         }
     });
     return {
-        html: html `
-            <div class='counter'>
+        html: html `
+            <div class='counter'>
                 ${() => {
             let n = state.length;
             if (n === 0) {
@@ -48,24 +48,24 @@ export default ({ currency, delay, max, suffix, value }) => {
             }
             return html.reactive(state.render, function (value, i) {
                 if (isNaN(parseInt(value, 10))) {
-                    return html `
-                                <span class='counter-character counter-character--symbol'>
-                                    ${value}
-                                </span>
+                    return html `
+                                <span class='counter-character counter-character--symbol'>
+                                    ${value}
+                                </span>
                             `;
                 }
-                return html `
-                            <div class='counter-character ${i > n - 3 ? 'counter-character--fraction' : ''}'>
-                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
-                                    <span>9</span>
-                                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
-                                    <span>0</span>
-                                </div>
-                            </div>
+                return html `
+                            <div class='counter-character ${i > n - 3 ? 'counter-character--fraction' : ''}'>
+                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
+                                    <span>9</span>
+                                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
+                                    <span>0</span>
+                                </div>
+                            </div>
                         `;
             });
-        }}
-            </div>
+        }}
+            </div>
         `,
         state: api
     };

package/build/components/ellipsis/index.js

@@ -1,8 +1,8 @@
 import { html } from '@esportsplus/template';
-export default (attributes) => html `
-<div class="ellipsis" ${attributes}>
-    <span></span>
-    <span></span>
-    <span></span>
-</div>
+export default (attributes) => html `
+<div class="ellipsis" ${attributes}>
+    <span></span>
+    <span></span>
+    <span></span>
+</div>
 `;

package/build/components/footer/index.js

@@ -1,55 +1,55 @@
 import { html, svg } from '@esportsplus/template';
 function copy({ attributes, brand }) {
-    return html `
-        <div class='footer-copyright group-item --flex-center'>
-            <div class='text --padding-vertical --padding-300 --text-300' style='--color-default: var(--color-grey-500);' ${attributes}>
-                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
-            </div>
-        </div>
+    return html `
+        <div class='footer-copyright group-item --flex-center'>
+            <div class='text --padding-vertical --padding-300 --text-300' style='--color-default: var(--color-grey-500);' ${attributes}>
+                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+            </div>
+        </div>
     `;
 }
 export default ({ copyright, footer, nav, social }) => {
-    return html `
-        <footer class='footer' ${footer?.attributes}>
-            <div class='container'>
-                <div class='group group--offset-top --flex-center --margin-400'>
-
+    return html `
+        <footer class='footer' ${footer?.attributes}>
+            <div class='container'>
+                <div class='group group--offset-top --flex-center --margin-400'>
+
                     ${nav
-        ? nav.links.map(({ text, url }) => html `
-                            <div class='group-item'>
-                                <a
-                                    class='link --color-white --padding-vertical-300 --text-300'
-                                    href='${url}'
-                                    style='--color-default: var(--color-grey-500);'
-                                    ${nav.attributes}
-                                >
-                                    ${text}
-                                </a>
-                            </div>
+        ? nav.links.map(({ text, url }) => html `
+                            <div class='group-item'>
+                                <a
+                                    class='link --color-white --padding-vertical-300 --text-300'
+                                    href='${url}'
+                                    style='--color-default: var(--color-grey-500);'
+                                    ${nav.attributes}
+                                >
+                                    ${text}
+                                </a>
+                            </div>
                         `)
-        : copy(copyright)}
-
-                    <div class='footer-break'></div>
-
-                    ${social?.links && social.links.map(({ icon, url }) => html `
-                        <div class='group-item'>
-                            <a
-                                class='link --color-white --padding-0px'
-                                href='${url}'
-                                style='--color-default: var(--color-grey-500);'
-                                ${social.attributes}
-                            >
-                                <div class='icon --size-500'>
-                                    ${svg.sprite(icon)}
-                                </div>
-                            </a>
-                        </div>
-                    `)}
-
-                    ${nav && copy(copyright)}
-
-                </div>
-            </div>
-        </footer>
+        : copy(copyright)}
+
+                    <div class='footer-break'></div>
+
+                    ${social?.links && social.links.map(({ icon, url }) => html `
+                        <div class='group-item'>
+                            <a
+                                class='link --color-white --padding-0px'
+                                href='${url}'
+                                style='--color-default: var(--color-grey-500);'
+                                ${social.attributes}
+                            >
+                                <div class='icon --size-500'>
+                                    ${svg.sprite(icon)}
+                                </div>
+                            </a>
+                        </div>
+                    `)}
+
+                    ${nav && copy(copyright)}
+
+                </div>
+            </div>
+        </footer>
     `;
 };

package/build/components/form/layout.js

@@ -1,12 +1,12 @@
 import { html } from '@esportsplus/template';
-export default (data) => html `
-    <form class='${data?.class}' ${data?.action || ''}>
-        ${data?.content || ''}
-
-        ${data?.button?.content ? html `
-            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
-                ${data?.button?.content || ''}
-            </button>
-        ` : ''}
-    </form>
+export default (data) => html `
+    <form class='${data?.class}' ${data?.action || ''}>
+        ${data?.content || ''}
+
+        ${data?.button?.content ? html `
+            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
+                ${data?.button?.content || ''}
+            </button>
+        ` : ''}
+    </form>
 `;

package/build/components/magnet/index.js

@@ -31,13 +31,13 @@ export default ({ attributes, hide }) => {
         };
     }
     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>
+        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/build/components/scrollbar/index.js

@@ -7,15 +7,15 @@ export default ({ attributes, fixed } = {}) => {
         translate: 0
     });
     return {
-        html: html `
-            <div
-                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
-                style='${() => `
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-                ${attributes}
-            ></div>
+        html: html `
+            <div
+                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
+                style='${() => `
+                    --translate: translate3d(0, ${state.translate}%, 0);
+                    --height: ${state.height}%;
+                `}'
+                ${attributes}
+            ></div>
         `,
         parent: {
             attributes: {

package/build/components/site/index.js

@@ -7,10 +7,10 @@ export default ({ attributes, content, scrollbar: sb }) => {
     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>
+    return html `
+        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
+            ${content || ''}
+            ${h}
+        </section>
     `;
 };

package/lib.scss

@@ -1,2 +1,2 @@
-// Dart sass doesn't support changing root directory for the package to 'src'
+// Dart sass doesn't support changing root directory for the package to 'src'
 @forward './src/lib';

package/package.json

@@ -1,25 +1,25 @@
-{
-    "author": "ICJR",
-    "dependencies": {
-        "@esportsplus/action": "^0.0.50",
-        "@esportsplus/reactivity": "^0.2.7",
-        "@esportsplus/template": "^0.6.6"
-    },
-    "devDependencies": {
-        "@esportsplus/webpack": "^0.5.0",
-        "modern-normalize": "^3.0.1"
-    },
-    "main": "build/index.js",
-    "name": "@esportsplus/ui",
-    "private": false,
-    "scripts": {
-        "build": "npm run build:ts && npm run build:assets",
-        "build:ts": "tsc && tsc-alias",
-        "build:assets": "webpack build --env=production=true",
-        "-": "-",
-        "prepublishOnly": "npm run build"
-    },
-    "sideEffects": false,
-    "types": "build/index.d.ts",
-    "version": "0.5.4"
-}
+{
+    "author": "ICJR",
+    "dependencies": {
+        "@esportsplus/action": "^0.0.50",
+        "@esportsplus/reactivity": "^0.2.7",
+        "@esportsplus/template": "^0.6.8"
+    },
+    "devDependencies": {
+        "@esportsplus/webpack": "^0.5.0",
+        "modern-normalize": "^3.0.1"
+    },
+    "main": "build/index.js",
+    "name": "@esportsplus/ui",
+    "private": false,
+    "scripts": {
+        "build": "npm run build:ts && npm run build:assets",
+        "build:ts": "tsc && tsc-alias",
+        "build:assets": "webpack build --env=production=true",
+        "-": "-",
+        "prepublishOnly": "npm run build"
+    },
+    "sideEffects": false,
+    "types": "build/index.d.ts",
+    "version": "0.5.6"
+}

package/src/components/accordion/index.ts

@@ -1,35 +1,35 @@
-import { reactive } from '@esportsplus/reactivity';
-
-
-type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
-
-
-let key = Symbol();
-
-
-export default () => {
-    let state = reactive({
-            active: 0 as boolean | number
-        });
-
-    return {
-        attributes: {
-            class: () => {
-                return state.active && '--active';
-            },
-            onrender: (element: Accordion) => {
-                element[key] = state;
-            },
-            style: (element: Accordion) => {
-                let parent = element.closest('accordion') as Accordion | null;
-
-                if (parent && key in parent) {
-                    parent[key].active = (+parent[key].active) + 1;
-                }
-
-                return state.active && `--max-height: ${element.scrollHeight}`;
-            }
-        },
-        state: state as ReturnType<typeof reactive<{ active: boolean }>>
-    };
+import { reactive } from '@esportsplus/reactivity';
+
+
+type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
+
+
+let key = Symbol();
+
+
+export default () => {
+    let state = reactive({
+            active: 0 as boolean | number
+        });
+
+    return {
+        attributes: {
+            class: () => {
+                return state.active && '--active';
+            },
+            onrender: (element: Accordion) => {
+                element[key] = state;
+            },
+            style: (element: Accordion) => {
+                let parent = element.closest('accordion') as Accordion | null;
+
+                if (parent && key in parent) {
+                    parent[key].active = (+parent[key].active) + 1;
+                }
+
+                return state.active && `--max-height: ${element.scrollHeight}`;
+            }
+        },
+        state: state as ReturnType<typeof reactive<{ active: boolean }>>
+    };
 }

package/src/components/accordion/scss/index.scss

@@ -1,16 +1,16 @@
-@use '/tokens';
-
-.accordion {
-    max-height: var(--max-height);
-    opacity: 0;
-    pointer-events: none;
-    transition:
-        max-height var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-
-
-    @include tokens.state(active) {
-        opacity: 1;
-        pointer-events: auto;
-    }
-}
+@use '/tokens';
+
+.accordion {
+    max-height: var(--max-height);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        max-height var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+
+
+    @include tokens.state(active) {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}

package/src/components/accordion/scss/variables.scss

@@ -1,9 +1,9 @@
-@use '/tokens';
-
-.accordion {
-    --max-height: 0;
-
-    @include tokens.state(inactive) {
-        --max-height: 0;
-    }
-}
+@use '/tokens';
+
+.accordion {
+    --max-height: 0;
+
+    @include tokens.state(inactive) {
+        --max-height: 0;
+    }
+}

package/src/components/anchor/scss/index.scss

@@ -1,41 +1,41 @@
-@use '/tokens';
-
-.anchor {
-    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
-    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
-    position: absolute;
-    transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    z-index: 9;
-
-
-    @include tokens.state(inactive) {
-        opacity: 0;
-
-        &, * {
-            pointer-events: none;
-        }
-    }
-
-
-    &--ne,
-    &--nw {
-        top: var(--margin-vertical);
-    }
-
-    &--se,
-    &--sw {
-        bottom: var(--margin-vertical);
-    }
-
-    &--ne,
-    &--se {
-        right: var(--margin-horizontal);
-    }
-
-    &--nw,
-    &--sw {
-        left: var(--margin-horizontal);
-    }
-}
+@use '/tokens';
+
+.anchor {
+    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
+    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
+    position: absolute;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    z-index: 9;
+
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+
+        &, * {
+            pointer-events: none;
+        }
+    }
+
+
+    &--ne,
+    &--nw {
+        top: var(--margin-vertical);
+    }
+
+    &--se,
+    &--sw {
+        bottom: var(--margin-vertical);
+    }
+
+    &--ne,
+    &--se {
+        right: var(--margin-horizontal);
+    }
+
+    &--nw,
+    &--sw {
+        left: var(--margin-horizontal);
+    }
+}