@esportsplus/ui 0.0.116 → 0.0.119

package/lib.scss

@@ -1,3 +1,2 @@
-// Necessary to expose lib for 3rd party use
-// - 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

@@ -7,19 +7,23 @@
     },
     "description": "UI",
     "devDependencies": {
-        "@esportsplus/webpack": "^0.1.31",
+        "@esportsplus/webpack": "^0.1.32",
         "modern-normalize": "^2.0.0"
     },
+    "files": [
+        "/build/**/*",
+        "/lib.scss",
+        "/tokens.scss"
+    ],
     "main": "build/index.js",
     "name": "@esportsplus/ui",
     "private": false,
     "scripts": {
-        "build": "npm run build:ts && npm run build:web",
+        "build": "npm run build:ts && npm run build:assets",
         "build:ts": "tsc && tsc-alias",
-        "build:web": "webpack build --env=production=true",
+        "build:assets": "webpack build --env=production=true",
         "-": "-",
         "prepublishOnly": "npm run build"
     },
-    "types": "build/index.d.ts",
-    "version": "0.0.116"
+    "version": "0.0.119"
 }

package/tokens.scss

@@ -1,3 +1,2 @@
-// Necessary to expose lib for 3rd party use
-// - 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/tokens';

package/.editorconfig

@@ -1,9 +0,0 @@
-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 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

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

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

package/build/components/alert/index.js

@@ -1,124 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const reactivity_1 = require("@esportsplus/reactivity");
-const template_1 = require("@esportsplus/template");
-let modifiers = {
-    error: 'red',
-    info: 'black',
-    success: 'green'
-}, state = (0, reactivity_1.reactive)({
-    active: false,
-    messages: new Set,
-    seconds: 0,
-    state: 'activating',
-    type: ''
-}), timeout = 250;
-function activate(key, messages, seconds = 0) {
-    if (!Array.isArray(messages)) {
-        messages = [messages];
-    }
-    if (!messages.length) {
-        return;
-    }
-    if (state.type !== key) {
-        state.messages.clear();
-    }
-    else {
-        state.type = '';
-    }
-    for (let message of messages) {
-        state.messages.add(message);
-    }
-    state.state = 'activating';
-    state.type = key;
-    if (state.active) {
-        state.active = true;
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-        return;
-    }
-    setTimeout(() => {
-        state.active = true;
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-    }, timeout);
-}
-function deactivate() {
-    state.state = 'deactivating';
-    setTimeout(() => {
-        state.active = false;
-        state.messages.clear();
-    }, timeout);
-}
-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>
-    ` : '';
-};
-const types = ['error', 'info', 'success'];
-exports.default = { deactivate, error, html: h, info, success, types };

package/build/components/export/clipboard.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (value: string) => void;
-export default _default;

package/build/components/export/clipboard.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = (value) => {
-    let input = document.createElement('INPUT');
-    document.body.appendChild(input);
-    input.setAttribute('value', value);
-    input.select();
-    document.execCommand('copy');
-    document.body.removeChild(input);
-};

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

@@ -1,5 +0,0 @@
-declare const _default: {
-    clipboard: (value: string) => void;
-    json: (content: any[] | Record<string, any>, name: string) => void;
-};
-export default _default;

package/build/components/export/index.js

@@ -1,8 +0,0 @@
-"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 };

package/build/components/export/json.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (content: any[] | Record<string, any>, name: string) => void;
-export default _default;

package/build/components/export/json.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.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' }));
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-};

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

@@ -1,17 +0,0 @@
-import description from './description';
-type Data = {
-    class?: string;
-    field?: {
-        content?: any;
-    };
-    mask?: {
-        class?: string;
-        style?: string;
-    };
-    name?: string;
-    style?: string;
-    title: string;
-    value?: any;
-} & Parameters<typeof description>[0];
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
-export default _default;

package/build/components/field/checkbox.js

@@ -1,46 +0,0 @@
-"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)({
-        active: false
-    });
-    return (0, template_1.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>
-    `;
-};

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

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

package/build/components/field/description.js

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

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

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

package/build/components/field/error.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.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>
-        `;
-    };
-};

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

@@ -1,18 +0,0 @@
-import description from './description';
-import title from './title';
-type Data = {
-    accept?: string;
-    class?: string;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    placeholder?: string;
-    style?: string;
-    type?: string;
-    value?: unknown;
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").Renderable;
-export default _default;

package/build/components/field/file.js

@@ -1,50 +0,0 @@
-"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 components_1 = require("../../components");
-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)({
-        active: false,
-        error: ''
-    });
-    return (0, template_1.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='${components_1.form.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>
-    `;
-};