@esportsplus/ui 0.1.8 → 0.2.2

package/build/components/site/index.js

@@ -1,20 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-const root_1 = require("../../components/root");
-const scrollbar_1 = __importDefault(require("../../components/scrollbar"));
-exports.default = (data) => {
-    let { attributes: a, html: h } = (0, scrollbar_1.default)({
+import { html } from '@esportsplus/template';
+import { onclick } from '../../components/root';
+import scrollbar from '../../components/scrollbar';
+export default (data) => {
+    let { attributes: a, html: h } = scrollbar({
         fixed: true,
         style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
     });
-    return (0, template_1.html) `
-        <section class='site ${data?.class || ''}' onclick='${root_1.onclick}' ${a}>
-            ${data?.content || ''}
-            ${h}
-        </section>
+    return html `
+        <section class='site ${data?.class || ''}' onclick='${onclick}' ${a}>
+            ${data?.content || ''}
+            ${h}
+        </section>
     `;
 };

package/build/components/tooltip/index.d.ts

@@ -27,14 +27,14 @@ declare const _default: {
             class: () => string;
             onclick: (this: HTMLElement, e: Event) => void;
         };
-        content: (() => "" | import("@esportsplus/template/build/types").Renderable) | undefined;
+        content: (() => "" | import("@esportsplus/template").Renderable) | undefined;
         state: {
             active: boolean;
             render: boolean | undefined;
             dispose: () => void;
             nodes: {
-                active: import("@esportsplus/reactivity/build/types").Signal<false> | import("@esportsplus/reactivity/build/types").Signal<true>;
-                render: import("@esportsplus/reactivity/build/types").Signal<false> | import("@esportsplus/reactivity/build/types").Signal<true> | import("@esportsplus/reactivity/build/types").Signal<undefined>;
+                active: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true>;
+                render: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true> | import("@esportsplus/reactivity").Signal<undefined>;
             };
         };
     };
@@ -49,8 +49,8 @@ declare const _default: {
             render: boolean | undefined;
             dispose: () => void;
             nodes: {
-                active: import("@esportsplus/reactivity/build/types").Signal<false> | import("@esportsplus/reactivity/build/types").Signal<true>;
-                render: import("@esportsplus/reactivity/build/types").Signal<false> | import("@esportsplus/reactivity/build/types").Signal<true> | import("@esportsplus/reactivity/build/types").Signal<undefined>;
+                active: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true>;
+                render: import("@esportsplus/reactivity").Signal<false> | import("@esportsplus/reactivity").Signal<true> | import("@esportsplus/reactivity").Signal<undefined>;
             };
         };
     };

package/build/components/tooltip/index.js

@@ -1,11 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const menu_1 = __importDefault(require("./menu"));
-const root_1 = __importDefault(require("../../components/root"));
+import { reactive } from '@esportsplus/reactivity';
+import menu from './menu';
+import root from '../../components/root';
 let queue = [], running = false, scheduled = false;
 async function frame() {
     if (running) {
@@ -19,12 +14,12 @@ async function frame() {
     running = false;
 }
 const onclick = (data = {}) => {
-    let content, state = (0, reactivity_1.reactive)({
+    let content, state = reactive({
         active: data.active || false,
         render: undefined
     });
     if (data.menu) {
-        content = (0, menu_1.default)(data.menu, state);
+        content = menu(data.menu, state);
     }
     return {
         attributes: {
@@ -42,7 +37,7 @@ const onclick = (data = {}) => {
                     queue.push(() => state.active = false);
                 }
                 if (!scheduled) {
-                    root_1.default.onclick.add(() => {
+                    root.onclick.add(() => {
                         frame();
                         scheduled = false;
                     });
@@ -55,7 +50,7 @@ const onclick = (data = {}) => {
     };
 };
 const onhover = (active = false) => {
-    let state = (0, reactivity_1.reactive)({
+    let state = reactive({
         active,
         render: undefined
     });
@@ -72,4 +67,4 @@ const onhover = (active = false) => {
         state
     };
 };
-exports.default = { onclick, onhover };
+export default { onclick, onhover };

package/build/components/tooltip/menu.d.ts

@@ -21,5 +21,5 @@ type Data = {
 declare const _default: (data: Data, state: {
     active?: boolean;
     render?: boolean;
-}) => () => "" | import("@esportsplus/template/build/types").Renderable;
+}) => () => "" | import("@esportsplus/template").Renderable;
 export default _default;

package/build/components/tooltip/menu.js

@@ -1,42 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
+import { effect } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 function template(data) {
-    return (0, template_1.html) `
-        <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-            ${(data?.items || []).map(item => (0, template_1.html) `
-                ${item?.border ? (0, template_1.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 ? (0, template_1.html) `onclick='${item.onclick}'` : ''}
-                    style='${item?.style || ''}'
-                    ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-                >
-                    ${item?.svg ? (0, template_1.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>
+    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>
     `;
 }
-exports.default = (data, state) => {
-    (0, reactivity_1.effect)(() => {
+export default (data, state) => {
+    effect(() => {
         if (!state.active || state.render) {
             return;
         }

package/build/index.js

@@ -1,27 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltip = exports.site = exports.scrollbar = exports.root = exports.page = exports.number = exports.form = exports.field = exports.export = exports.alert = void 0;
-require("@esportsplus/webpack/global.d.ts");
-var alert_1 = require("./components/alert");
-Object.defineProperty(exports, "alert", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
-var export_1 = require("./components/export");
-Object.defineProperty(exports, "export", { enumerable: true, get: function () { return __importDefault(export_1).default; } });
-var field_1 = require("./components/field");
-Object.defineProperty(exports, "field", { enumerable: true, get: function () { return __importDefault(field_1).default; } });
-var form_1 = require("./components/form");
-Object.defineProperty(exports, "form", { enumerable: true, get: function () { return __importDefault(form_1).default; } });
-var number_1 = require("./components/number");
-Object.defineProperty(exports, "number", { enumerable: true, get: function () { return __importDefault(number_1).default; } });
-var page_1 = require("./components/page");
-Object.defineProperty(exports, "page", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
-var root_1 = require("./components/root");
-Object.defineProperty(exports, "root", { enumerable: true, get: function () { return __importDefault(root_1).default; } });
-var scrollbar_1 = require("./components/scrollbar");
-Object.defineProperty(exports, "scrollbar", { enumerable: true, get: function () { return __importDefault(scrollbar_1).default; } });
-var site_1 = require("./components/site");
-Object.defineProperty(exports, "site", { enumerable: true, get: function () { return __importDefault(site_1).default; } });
-var tooltip_1 = require("./components/tooltip");
-Object.defineProperty(exports, "tooltip", { enumerable: true, get: function () { return __importDefault(tooltip_1).default; } });
+import '@esportsplus/webpack/global.d.ts';
+export { default as alert } from './components/alert';
+export { default as export } from './components/export';
+export { default as field } from './components/field';
+export { default as form } from './components/form';
+export { default as number } from './components/number';
+export { default as page } from './components/page';
+export { default as root } from './components/root';
+export { default as scrollbar } from './components/scrollbar';
+export { default as site } from './components/site';
+export { default as tooltip } from './components/tooltip';

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.38",
-        "@esportsplus/reactivity": "^0.1.19",
-        "@esportsplus/template": "^0.1.31"
-    },
-    "devDependencies": {
-        "@esportsplus/webpack": "^0.1.33",
-        "modern-normalize": "^2.0.0"
-    },
-    "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.1.8"
-}
+{
+    "author": "ICJR",
+    "dependencies": {
+        "@esportsplus/action": "^0.0.47",
+        "@esportsplus/reactivity": "^0.1.21",
+        "@esportsplus/template": "^0.2.3"
+    },
+    "devDependencies": {
+        "@esportsplus/webpack": "^0.2.3",
+        "modern-normalize": "^2.0.0"
+    },
+    "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.2.2"
+}

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,4 +1,4 @@
-.accordion {
-    --max-height: 0;
-    --transition-duration: var(--transition-duration-400);
-}
+.accordion {
+    --max-height: 0;
+    --transition-duration: var(--transition-duration-400);
+}