@esportsplus/ui 0.1.8 → 0.2.2

package/build/components/field/select.js

@@ -1,16 +1,11 @@
-"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 template_1 = require("@esportsplus/template");
-const form_1 = __importDefault(require("../../components/form"));
-const scrollbar_1 = __importDefault(require("../../components/scrollbar"));
-const root_1 = __importDefault(require("../../components/root"));
-const description_1 = __importDefault(require("./description"));
-const error_1 = __importDefault(require("./error"));
-const title_1 = __importDefault(require("./title"));
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import form from '../../components/form';
+import scrollbar from '../../components/scrollbar';
+import root from '../../components/root';
+import description from './description';
+import error from './error';
+import title from './title';
 function parse(keys, selected) {
     let options = {};
     for (let key of keys) {
@@ -23,17 +18,17 @@ function parse(keys, selected) {
     };
 }
 function template(data, state) {
-    let { attributes: a, html: h } = (0, scrollbar_1.default)({
+    let { attributes: a, html: h } = scrollbar({
         fixed: true,
         style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
     });
-    return (0, template_1.html) `
-        <div
-            class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'
-            style='${data?.tooltip?.style || ''}'
-        >
-            <div
-                class='row --flex-column'
+    return html `
+        <div
+            class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'
+            style='${data?.tooltip?.style || ''}'
+        >
+            <div
+                class='row --flex-column'
                 onclick='${(e) => {
         let key = e?.target?.dataset?.key;
         if (key === undefined) {
@@ -46,65 +41,65 @@ function template(data, state) {
         if (data.effect) {
             data.effect(key);
         }
-    }}'
-                ${a}
-            >
-                ${Object.keys(data.options || {}).map((key) => (0, template_1.html) `
-                    <div
-                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
-                        style='${data?.option?.style || ''}'
-                    >
-                        <span class="--text-truncate">
-                            ${data.options[key]}
-                        </span>
-                    </div>
-                `)}
-            </div>
-
-            ${h}
-        </div>
+    }}'
+                ${a}
+            >
+                ${Object.keys(data.options || {}).map((key) => html `
+                    <div
+                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
+                        style='${data?.option?.style || ''}'
+                    >
+                        <span class="--text-truncate">
+                            ${data.options[key]}
+                        </span>
+                    </div>
+                `)}
+            </div>
+
+            ${h}
+        </div>
     `;
 }
-exports.default = (data) => {
-    let state = (0, reactivity_1.reactive)(Object.assign({
+export default (data) => {
+    let state = reactive(Object.assign({
         active: false,
         error: '',
         render: false,
     }, parse(Object.keys(data.options || {}), data.selected)));
-    return (0, template_1.html) `
-        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
-            ${(0, title_1.default)(data)}
-
-            <label
-                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
+    return html `
+        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
+            ${title(data)}
+
+            <label
+                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
                 onclick='${() => {
         state.render = true;
         state.active = !state.active;
         if (state.active) {
-            root_1.default.onclick.add(() => state.active = false);
+            root.onclick.add(() => state.active = false);
         }
-    }}'
-                style='${data?.mask?.style || ''}'
-            >
-                <input
-                    class='field-tag field-tag--hidden'
-                    name='${data.name}'
-                    onclick='${() => { }}'
-                    onrender='${form_1.default.input.attributes(state)}'
-                    value='${() => state.selected}'
-                >
-
-                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
-                    ${() => data.options[state.selected] || '-'}
-                </div>
-
-                <div class='field-mask-arrow'></div>
-
-                ${() => state.render ? template(data, state) : ''}
-            </label>
-
-            ${(0, description_1.default)(data)}
-            ${(0, error_1.default)(state)}
-        </div>
+    }}'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onclick='${() => { }}'
+                    onrender='${form.input.attributes(state)}'
+                    value='${() => state.selected}'
+                >
+
+                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
+                    ${() => data.options[state.selected] || '-'}
+                </div>
+
+                <div class='field-mask-arrow'></div>
+
+                ${() => state.render ? template(data, state) : ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
     `;
 };

package/build/components/field/switch.d.ts

@@ -1,3 +1,3 @@
 import checkbox from './checkbox';
-declare const _default: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template/build/types").Renderable;
+declare const _default: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template").Renderable;
 export default _default;

package/build/components/field/switch.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 checkbox_1 = __importDefault(require("./checkbox"));
-exports.default = (data) => {
+import checkbox from './checkbox';
+export default (data) => {
     data.mask = data.mask || {};
     data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-    return (0, checkbox_1.default)(data);
+    return checkbox(data);
 };

package/build/components/field/text.d.ts

@@ -17,5 +17,5 @@ type Data = {
     type?: string;
     value?: unknown;
 } & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
+declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
 export default _default;

package/build/components/field/text.js

@@ -1,51 +1,46 @@
-"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 template_1 = require("@esportsplus/template");
-const form_1 = __importDefault(require("../../components/form"));
-const description_1 = __importDefault(require("./description"));
-const error_1 = __importDefault(require("./error"));
-const title_1 = __importDefault(require("./title"));
-exports.default = (data) => {
-    let state = (0, reactivity_1.reactive)({
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import form from '../../components/form';
+import description from './description';
+import error from './error';
+import title from './title';
+export default (data) => {
+    let state = reactive({
         active: false,
         error: ''
     });
-    return (0, template_1.html) `
-        <div
-            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
+    return html `
+        <div
+            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
             onfocusin='${() => {
         state.active = true;
-    }}'
+    }}'
             onfocusout='${() => {
         state.active = false;
-    }}'
-            style='${data?.style || ''}'
-        >
-            ${(0, title_1.default)(data)}
-
-            <label
-                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) ? '--margin-top' : ''} --margin-300'
-                style='${data?.mask?.style || ''}'
-            >
-                <${data?.textarea ? 'textarea' : 'input'}
-                    class='field-tag --padding-400 ${data?.tag?.class || ''}'
-                    name='${data?.name || ''}'
-                    placeholder='${data?.placeholder || ''}'
-                    onrender='${form_1.default.input.attributes(state)}'
-                    type='${data?.type || 'string'}'
-                    ${!data?.textarea && data?.value !== undefined ? (0, template_1.html) `value='${data.value}'` : ''}
-                >
-                ${data?.textarea ? (0, template_1.html) `${data?.value || ''}</textarea>` : ''}
-
-                ${data?.mask?.content || ''}
-            </label>
-
-            ${(0, description_1.default)(data)}
-            ${(0, error_1.default)(state)}
-        </div>
+    }}'
+            style='${data?.style || ''}'
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) ? '--margin-top' : ''} --margin-300'
+                style='${data?.mask?.style || ''}'
+            >
+                <${data?.textarea ? 'textarea' : 'input'}
+                    class='field-tag --padding-400 ${data?.tag?.class || ''}'
+                    name='${data?.name || ''}'
+                    placeholder='${data?.placeholder || ''}'
+                    onrender='${form.input.attributes(state)}'
+                    type='${data?.type || 'string'}'
+                    ${!data?.textarea && data?.value !== undefined ? html `value='${data.value}'` : ''}
+                >
+                ${data?.textarea ? html `${data?.value || ''}</textarea>` : ''}
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
     `;
 };

package/build/components/field/textarea.d.ts

@@ -1,3 +1,3 @@
 import text from './text';
-declare const _default: (data: Parameters<typeof text>[0]) => import("@esportsplus/template/build/types").Renderable;
+declare const _default: (data: Parameters<typeof text>[0]) => import("@esportsplus/template").Renderable;
 export default _default;

package/build/components/field/textarea.js

@@ -1,10 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const text_1 = __importDefault(require("./text"));
-exports.default = (data) => {
+import text from './text';
+export default (data) => {
     data.textarea = true;
-    return (0, text_1.default)(data);
+    return text(data);
 };

package/build/components/field/title.d.ts

@@ -1,5 +1,5 @@
 declare const _default: (data: {
     required?: boolean;
     title?: string;
-}) => "" | import("@esportsplus/template/build/types").Renderable;
+}) => "" | import("@esportsplus/template").Renderable;
 export default _default;

package/build/components/field/title.js

@@ -1,24 +1,19 @@
-"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 tooltip_1 = __importDefault(require("../../components/tooltip"));
-exports.default = (data) => {
+import { html } from '@esportsplus/template';
+import tooltip from '../../components/tooltip';
+export default (data) => {
     if (!data?.title) {
         return '';
     }
-    let { attributes } = tooltip_1.default.onhover();
-    return (0, template_1.html) `
-        <div class="field-title --flex-horizontal-space-between --flex-vertical">
-            ${data.title}
-
-            ${data?.required && (0, template_1.html) `
-                <div class="bubble --background-primary --margin-left" ${attributes}>
-                    <span class="tooltip-message tooltip-message--w">Required</span>
-                </div>
-            `}
-        </div>
+    let { attributes } = tooltip.onhover();
+    return html `
+        <div class="field-title --flex-horizontal-space-between --flex-vertical">
+            ${data.title}
+
+            ${data?.required && html `
+                <div class="bubble --background-primary --margin-left" ${attributes}>
+                    <span class="tooltip-message tooltip-message--w">Required</span>
+                </div>
+            `}
+        </div>
     `;
 };

package/build/components/form/action.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 action_1 = require("@esportsplus/action");
-const alert_1 = __importDefault(require("../../components/alert"));
-const input_1 = __importDefault(require("./input"));
+import response from '@esportsplus/action';
+import alert from '../../components/alert';
+import input from './input';
 function parse(input) {
     let data = {};
     for (let path in input) {
@@ -18,7 +13,7 @@ function parse(input) {
     return data;
 }
 ;
-function default_1(action) {
+export default function (action) {
     return {
         onclick: function (event) {
             let trigger = event.target;
@@ -32,12 +27,12 @@ function default_1(action) {
             event.preventDefault();
             event?.submitter?.classList.add('button--processing');
             let { errors } = await action({
-                alert: alert_1.default,
+                alert,
                 input: parse(Object.fromEntries(new FormData(this)?.entries())),
-                response: action_1.response
+                response
             });
             for (let i = 0, n = errors.length; i < n; i++) {
-                let { message, path } = errors[i], state = input_1.default.get(this[path]);
+                let { message, path } = errors[i], state = input.get(this[path]);
                 if (!state) {
                     continue;
                 }
@@ -47,5 +42,4 @@ function default_1(action) {
         }
     };
 }
-exports.default = default_1;
 ;

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

@@ -18,6 +18,6 @@ declare const _default: {
         } | undefined;
         class?: string | undefined;
         content?: any;
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
 };
 export default _default;

package/build/components/form/index.js

@@ -1,9 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const action_1 = __importDefault(require("./action"));
-const input_1 = __importDefault(require("./input"));
-const layout_1 = __importDefault(require("./layout"));
-exports.default = { action: action_1.default, input: input_1.default, layout: layout_1.default };
+import action from './action';
+import input from './input';
+import layout from './layout';
+export default { action, input, layout };

package/build/components/form/input.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 let cache = new WeakMap();
 const attributes = (reactive) => {
     return (element) => {
@@ -9,4 +7,4 @@ const attributes = (reactive) => {
 const get = (element) => {
     return element ? cache.get(element) : undefined;
 };
-exports.default = { attributes, get };
+export default { attributes, get };

package/build/components/form/layout.d.ts

@@ -8,5 +8,5 @@ type Data = {
     class?: string;
     content?: any;
 };
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
+declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
 export default _default;

package/build/components/form/layout.js

@@ -1,14 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data) => (0, template_1.html) `
-    <form class='${data?.class}' ${data?.action || ''}>
-        ${data?.content || ''}
-
-        ${data?.button?.content ? (0, template_1.html) `
-            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
-                ${data?.button?.content || ''}
-            </button>
-        ` : ''}
-    </form>
+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>
 `;

package/build/components/form/types.d.ts

@@ -1,4 +1,4 @@
-import { response, Response } from '@esportsplus/action';
+import response, { Response } from '@esportsplus/action';
 import alert from '../../components/alert';
 type Action = (data: Payload) => Promise<Errors> | Errors;
 type Errors = {

package/build/components/form/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/build/components/number/index.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ordinal = exports.abbreviate = void 0;
 let formatter = null, suffixes = ['th', 'st', 'nd', 'rd'];
 const abbreviate = (number) => {
     if (formatter === null) {
@@ -11,10 +8,9 @@ const abbreviate = (number) => {
     }
     return formatter.format(number);
 };
-exports.abbreviate = abbreviate;
 const ordinal = (number) => {
     let value = number % 100;
     return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
 };
-exports.ordinal = ordinal;
-exports.default = { abbreviate, ordinal };
+export default { abbreviate, ordinal };
+export { abbreviate, ordinal };

package/build/components/page/index.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.title = exports.suptitle = exports.subtitle = void 0;
 const subtitle = {
     class: 'page-subtitle --margin-200 --text-crop-bottom'
 };
-exports.subtitle = subtitle;
 const suptitle = {
     class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
 };
-exports.suptitle = suptitle;
 const title = {
     class: 'page-title --line-height-200 --margin-400 --text-crop'
 };
-exports.title = title;
-exports.default = { subtitle, suptitle, title };
+export default { subtitle, suptitle, title };
+export { subtitle, suptitle, title };

package/build/components/root/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onclick = void 0;
-const onclick_1 = __importDefault(require("./onclick"));
-exports.onclick = onclick_1.default;
-exports.default = { onclick: onclick_1.default };
+import onclick from './onclick';
+export default { onclick };
+export { onclick };

package/build/components/root/onclick.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 let queue = [];
 const onclick = async () => {
     if (queue.length === 0) {
@@ -13,4 +11,4 @@ const onclick = async () => {
 onclick.add = (fn) => {
     queue.push(fn);
 };
-exports.default = onclick;
+export default onclick;

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

@@ -1,11 +1,11 @@
 declare const _default: ({ fixed, style }?: {
-    fixed?: boolean | undefined;
-    style?: string | undefined;
+    fixed?: boolean;
+    style?: string;
 }) => {
     attributes: {
         class: () => string;
         onscroll: (this: HTMLElement) => void;
     };
-    html: import("@esportsplus/template/build/types").Renderable;
+    html: import("@esportsplus/template").Renderable;
 };
 export default _default;

package/build/components/scrollbar/index.js

@@ -1,10 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 let root = document.body, width;
-exports.default = ({ fixed, style } = {}) => {
-    let state = (0, reactivity_1.reactive)({
+export default ({ fixed, style } = {}) => {
+    let state = reactive({
         height: 100,
         translate: 0
     });
@@ -24,15 +22,15 @@ exports.default = ({ fixed, style } = {}) => {
                 state.translate = (this.scrollTop / this.clientHeight) * 100;
             }
         },
-        html: (0, template_1.html) `
-            <div
-                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
-                style='${() => `
-                    ${style || ''}
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-            ></div>
+        html: html `
+            <div
+                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
+                style='${() => `
+                    ${style || ''}
+                    --translate: translate3d(0, ${state.translate}%, 0);
+                    --height: ${state.height}%;
+                `}'
+            ></div>
         `
     };
 };

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

@@ -5,5 +5,5 @@ type Data = {
         style?: string;
     };
 };
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
+declare const _default: (data: Data) => import("@esportsplus/template").Renderable;
 export default _default;