@esportsplus/ui 0.1.6 → 0.2.2

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

@@ -0,0 +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:
+      interval: "daily"

package/.github/workflows/bump.yml

@@ -0,0 +1,7 @@
+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

@@ -0,0 +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 }}
+    uses: esportsplus/workflows/.github/workflows/publish.yml@main

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

@@ -2,7 +2,7 @@ declare function deactivate(): void;
 declare const _default: {
     deactivate: typeof deactivate;
     error: (messages: string | string[], seconds?: number) => void;
-    html: () => () => "" | import("@esportsplus/template/build/types").Renderable;
+    html: () => () => "" | import("@esportsplus/template").Renderable;
     info: (messages: string | string[], seconds?: number) => void;
     success: (messages: string | string[], seconds?: number) => void;
     types: readonly ["error", "info", "success"];

package/build/components/alert/index.js

@@ -1,12 +1,10 @@
-"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 modifiers = {
     error: 'red',
     info: 'black',
     success: 'green'
-}, state = (0, reactivity_1.reactive)({
+}, state = reactive({
     active: false,
     messages: new Set,
     seconds: 0,
@@ -88,37 +86,37 @@ const error = (messages, seconds = 0) => activate('error', messages, seconds);
 const info = (messages, seconds = 0) => activate('info', messages, seconds);
 const success = (messages, seconds = 0) => activate('success', messages, seconds);
 const h = () => {
-    return () => state.active ? (0, template_1.html) `
-        <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
-                <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
-                    <div class="icon --size-300">
-                        ${template_1.html.inline `
-                            <svg width="16" height="16" viewBox="0 0 16 16">
-                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
-                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
-                            </svg>
-                        `}
-                    </div>
-                </div>
-            </div>
-
-            <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
-                <div class="alert-message --active --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
-                    <div class='--flex-row --flex-fill --flex-vertical'>
-                        <div class="--flex-fill --flex-column --padding-right --padding-400">
-                            <h5 class="page-title">
-                                ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
-                            </h5>
-                            ${() => state.type && [...state.messages].map((message) => (0, template_1.html) `
-                                <p class='--margin-top --margin-border-width-500'>${message}</p>
-                            `)}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+    return () => state.active ? html `
+        <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
+            <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
+                <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
+                    <div class="icon --size-300">
+                        ${html.inline `
+                            <svg width="16" height="16" viewBox="0 0 16 16">
+                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
+                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
+                            </svg>
+                        `}
+                    </div>
+                </div>
+            </div>
+
+            <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
+                <div class="alert-message --active --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
+                    <div class='--flex-row --flex-fill --flex-vertical'>
+                        <div class="--flex-fill --flex-column --padding-right --padding-400">
+                            <h5 class="page-title">
+                                ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
+                            </h5>
+                            ${() => state.type && [...state.messages].map((message) => html `
+                                <p class='--margin-top --margin-border-width-500'>${message}</p>
+                            `)}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     ` : '';
 };
 const types = ['error', 'info', 'success'];
-exports.default = { deactivate, error, html: h, info, success, types };
+export default { deactivate, error, html: h, info, success, types };

package/build/components/export/clipboard.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = (value) => {
+export default (value) => {
     let input = document.createElement('INPUT');
     document.body.appendChild(input);
     input.setAttribute('value', value);

package/build/components/export/index.js

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

package/build/components/export/json.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = (content, name) => {
+export default (content, name) => {
     let link = document.createElement('a');
     link.download = name + '.json';
     link.href = window.URL.createObjectURL(new Blob([JSON.stringify(content)], { type: 'application/json' }));

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

@@ -13,5 +13,5 @@ type Data = {
     title: string;
     value?: any;
 } & Parameters<typeof description>[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/checkbox.js

@@ -1,46 +1,41 @@
-"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 description_1 = __importDefault(require("./description"));
-exports.default = (data) => {
-    let state = (0, reactivity_1.reactive)({
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import description from './description';
+export default (data) => {
+    let state = reactive({
         active: false
     });
-    return (0, template_1.html) `
-        <div
-            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
+    return html `
+        <div
+            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
             onchange='${(e) => {
         if (e.target.type !== 'checkbox') {
             return;
         }
         state.active = e.target?.checked;
-    }}'
-            style='${data?.style || ''}'
-        >
-            <div class="field-title --flex-horizontal-space-between --flex-vertical">
-                ${data.title}
-
-                <label
-                    class="field-mask ${(data?.mask?.class || '').indexOf('field-mask--switch') === -1 ? 'field-mask--checkbox' : ''} --margin-left --margin-400 ${data?.mask?.class || ''}"
-                    style='${data?.mask?.style || ''}'
-                >
-                    <input
-                        class='field-tag field-tag--hidden'
-                        ${data.name ? `name='${data.name}'` : ''}
-                        type='checkbox'
-                        value='1'
-                        ${(data?.class || '').indexOf('--active') !== -1 || data?.value ? 'checked' : ''}
-                    >
-                </label>
-            </div>
-
-            ${data?.field?.content || ''}
-
-            ${(0, description_1.default)(data)}
-        </div>
+    }}'
+            style='${data?.style || ''}'
+        >
+            <div class="field-title --flex-horizontal-space-between --flex-vertical">
+                ${data.title}
+
+                <label
+                    class="field-mask ${(data?.mask?.class || '').indexOf('field-mask--switch') === -1 ? 'field-mask--checkbox' : ''} --margin-left --margin-400 ${data?.mask?.class || ''}"
+                    style='${data?.mask?.style || ''}'
+                >
+                    <input
+                        class='field-tag field-tag--hidden'
+                        ${data.name ? `name='${data.name}'` : ''}
+                        type='checkbox'
+                        value='1'
+                        ${(data?.class || '').indexOf('--active') !== -1 || data?.value ? 'checked' : ''}
+                    >
+                </label>
+            </div>
+
+            ${data?.field?.content || ''}
+
+            ${description(data)}
+        </div>
     `;
 };

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

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

package/build/components/field/description.js

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data) => {
+import { html } from '@esportsplus/template';
+export default (data) => {
     if (!data?.description) {
         return '';
     }
-    return (0, template_1.html) `
-        <div class='field-description --margin-top --margin-300'>${data.description}</div>
+    return html `
+        <div class='field-description --margin-top --margin-300'>${data.description}</div>
     `;
 };

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

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

package/build/components/field/error.js

@@ -1,13 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data) => {
+import { html } from '@esportsplus/template';
+export default (data) => {
     return () => {
         if (!data.error) {
             return '';
         }
-        return (0, template_1.html) `
-            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
+        return html `
+            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
         `;
     };
 };

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

@@ -14,5 +14,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/file.js

@@ -1,50 +1,45 @@
-"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 || ''} cursor:pointer;'
-            >
-                <input
-                    ${data?.accept ? `accept='${data.accept}'` : ''}
-                    class='field-tag field-tag--hidden'
-                    name='${data.name}'
-                    onrender='${form_1.default.input.attributes(state)}'
-                    type='file'
-                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
-                >
-
-                ${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 || ''} cursor:pointer;'
+            >
+                <input
+                    ${data?.accept ? `accept='${data.accept}'` : ''}
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onrender='${form.input.attributes(state)}'
+                    type='file'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
     `;
 };

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

@@ -14,7 +14,7 @@ declare const _default: {
         value?: any;
     } & {
         description?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
     file: (data: {
         accept?: string | undefined;
         class?: string | undefined;
@@ -33,7 +33,7 @@ declare const _default: {
     } & {
         required?: boolean | undefined;
         title?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
     optional: {
         select: (data: {
             class?: string | undefined;
@@ -84,7 +84,7 @@ declare const _default: {
                 required?: boolean | undefined;
                 title?: string | undefined;
             };
-        }) => import("@esportsplus/template/build/types").Renderable;
+        }) => import("@esportsplus/template").Renderable;
         text: (data: {
             class?: string | undefined;
             field?: {
@@ -123,7 +123,7 @@ declare const _default: {
                 required?: boolean | undefined;
                 title?: string | undefined;
             };
-        }) => import("@esportsplus/template/build/types").Renderable;
+        }) => import("@esportsplus/template").Renderable;
     };
     select: (data: {
         class?: string | undefined;
@@ -157,7 +157,7 @@ declare const _default: {
     } & {
         required?: boolean | undefined;
         title?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
     switch: (data: {
         class?: string | undefined;
         field?: {
@@ -173,7 +173,7 @@ declare const _default: {
         value?: any;
     } & {
         description?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
     textarea: (data: {
         class?: string | undefined;
         mask?: {
@@ -195,7 +195,7 @@ declare const _default: {
     } & {
         required?: boolean | undefined;
         title?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
     text: (data: {
         class?: string | undefined;
         mask?: {
@@ -217,6 +217,6 @@ declare const _default: {
     } & {
         required?: boolean | undefined;
         title?: string | undefined;
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
 };
 export default _default;

package/build/components/field/index.js

@@ -1,13 +1,8 @@
-"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"));
-const file_1 = __importDefault(require("./file"));
-const optional_1 = __importDefault(require("./optional"));
-const select_1 = __importDefault(require("./select"));
-const switch_1 = __importDefault(require("./switch"));
-const textarea_1 = __importDefault(require("./textarea"));
-const text_1 = __importDefault(require("./text"));
-exports.default = { checkbox: checkbox_1.default, file: file_1.default, optional: optional_1.default, select: select_1.default, switch: switch_1.default, textarea: textarea_1.default, text: text_1.default };
+import checkbox from './checkbox';
+import file from './file';
+import optional from './optional';
+import select from './select';
+import s from './switch';
+import textarea from './textarea';
+import text from './text';
+export default { checkbox, file, optional, select, switch: s, textarea, text };

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

@@ -48,7 +48,7 @@ declare const _default: {
             required?: boolean | undefined;
             title?: string | undefined;
         };
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
     text: (data: {
         class?: string | undefined;
         field?: {
@@ -87,6 +87,6 @@ declare const _default: {
             required?: boolean | undefined;
             title?: string | undefined;
         };
-    }) => import("@esportsplus/template/build/types").Renderable;
+    }) => import("@esportsplus/template").Renderable;
 };
 export default _default;

package/build/components/field/optional.js

@@ -1,21 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const select_1 = __importDefault(require("./select"));
-const switch_1 = __importDefault(require("./switch"));
-const text_1 = __importDefault(require("./text"));
+import sel from './select';
+import s from './switch';
+import tex from './text';
 const select = (data) => {
-    data.field.content = (0, select_1.default)(Object.assign(data.field || {}, {
+    data.field.content = sel(Object.assign(data.field || {}, {
         class: `field--optional ${data?.field?.class || ''}`
     }));
-    return (0, switch_1.default)(data);
+    return s(data);
 };
 const text = (data) => {
-    data.field.content = (0, text_1.default)(Object.assign(data.field || {}, {
+    data.field.content = tex(Object.assign(data.field || {}, {
         class: `field--optional ${data?.field?.class || ''}`
     }));
-    return (0, switch_1.default)(data);
+    return s(data);
 };
-exports.default = { select, text };
+export default { select, text };

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

@@ -28,5 +28,5 @@ type Data = {
         style?: string;
     };
 } & 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;