@esportsplus/ui 0.0.113 → 0.0.116

package/build/components/alert/index.js

@@ -1,11 +1,7 @@
 "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 close_svg_1 = __importDefault(require("~/storage/svg/close.svg"));
 let modifiers = {
     error: 'red',
     info: 'black',
@@ -97,7 +93,12 @@ const h = () => {
             <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 `${close_svg_1.default}`}
+                        ${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>

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

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

package/build/components/export/clipboard.js

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

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

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

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

package/build/components/export/json.js

@@ -0,0 +1,10 @@
+"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/index.d.ts

@@ -1,4 +1,5 @@
 export { default as alert } from './alert';
+export { default as export } from './export';
 export { default as field } from './field';
 export { default as form } from './form';
 export { default as number } from './number';

package/build/components/index.js

@@ -3,9 +3,11 @@ 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.alert = void 0;
+exports.tooltip = exports.site = exports.scrollbar = exports.root = exports.page = exports.number = exports.form = exports.field = exports.export = exports.alert = void 0;
 var alert_1 = require("./alert");
 Object.defineProperty(exports, "alert", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
+var export_1 = require("./export");
+Object.defineProperty(exports, "export", { enumerable: true, get: function () { return __importDefault(export_1).default; } });
 var field_1 = require("./field");
 Object.defineProperty(exports, "field", { enumerable: true, get: function () { return __importDefault(field_1).default; } });
 var form_1 = require("./form");

package/package.json

@@ -2,12 +2,12 @@
     "author": "ICJR",
     "dependencies": {
         "@esportsplus/action": "^0.0.38",
-        "@esportsplus/reactivity": "^0.1.18",
-        "@esportsplus/template": "^0.1.29"
+        "@esportsplus/reactivity": "^0.1.19",
+        "@esportsplus/template": "^0.1.31"
     },
     "description": "UI",
     "devDependencies": {
-        "@esportsplus/webpack": "^0.1.30",
+        "@esportsplus/webpack": "^0.1.31",
         "modern-normalize": "^2.0.0"
     },
     "main": "build/index.js",
@@ -21,5 +21,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "build/index.d.ts",
-    "version": "0.0.113"
+    "version": "0.0.116"
 }

package/src/components/alert/index.ts

@@ -1,6 +1,5 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import close from '~/storage/svg/close.svg';
 
 
 type Type = 'error' | 'info' | 'success';
@@ -118,12 +117,18 @@ const success = (messages: string | string[], seconds: number = 0) => activate('
 
 
 const h = () => {
+    // TODO: Fix importing close svg
     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`${close}`}
+                        ${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>

package/src/components/export/clipboard.ts

@@ -0,0 +1,12 @@
+export default (value: string) => {
+    let input = document.createElement('INPUT') as HTMLInputElement;
+
+    document.body.appendChild(input);
+
+    input.setAttribute('value', value);
+    input.select();
+
+    document.execCommand('copy');
+
+    document.body.removeChild(input);
+};

package/src/components/export/index.ts

@@ -0,0 +1,5 @@
+import clipboard from './clipboard';
+import json from './json';
+
+
+export default { clipboard, json };

package/src/components/export/json.ts

@@ -0,0 +1,15 @@
+export default (content: any[] | Record<string, any>, name: string) => {
+    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/src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as alert }from './alert';
+export { default as export }from './export';
 export { default as field }from './field';
 export { default as form }from './form';
 export { default as number }from './number';

package/webpack.config.ts

@@ -1,11 +1,8 @@
 import { config, entry } from '@esportsplus/webpack';
 
 
-export default (env: { production?: boolean | string }) => {
-    let production = env.production !== 'false';
-
+export default ({ production }: { production?: string }) => {
     return config.web({
-        cache: false,
         contenthash: false,
         entry: {
             css: {
@@ -23,7 +20,7 @@ export default (env: { production?: boolean | string }) => {
                 }
             }
         },
-        mode: production ? 'production': 'development',
+        mode: production !== 'false' ? 'production': 'development',
         // Temporary output until css root directory can be set through
         // package.json or similar ( like 'main' key )
         output: {

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

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

package/build/components/overlay/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data = {}) => (0, template_1.html) `
-    <section class='overlay ${data?.class || ''}'>
-        ${data?.content || ''}
-    </section>
-`;

package/build/components/page/header.d.ts

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

package/build/components/page/header.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data) => (0, template_1.html) `
-    ${data?.suptitle ? (0, template_1.html) `
-        <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
-            ${data?.suptitle}
-        </span>
-    ` : ''}
-
-    ${data?.title ? (0, template_1.html) `
-        <h1 class="page-title --line-height-200 --margin-300 ${!data?.subtitle && '--text-crop-bottom'} ${data?.suptitle ? '--margin-top' : '--text-crop-top'}">
-            ${data?.title}
-        </h1>
-    ` : ''}
-
-    ${data?.subtitle ? (0, template_1.html) `
-        <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
-            ${data?.subtitle}
-        </span>
-    ` : ''}
-`;

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

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

package/build/components/page/layout.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const template_1 = require("@esportsplus/template");
-exports.default = (data = {}) => (0, template_1.html) `
-    <section class='page ${data?.class}'>
-        ${data?.content}
-    </section>
-`;

package/storage/svg/close.svg

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