@esportsplus/ui 0.0.16 → 0.0.18

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

@@ -1,4 +1,5 @@
 import header from './header';
+import layout from './layout';
 declare const _default: {
     header: ({ subtitle, suptitle, title }: {
         subtitle?: string | undefined;
@@ -9,6 +10,14 @@ declare const _default: {
         type: string;
         values: never[];
     };
+    layout: (data?: {
+        class?: string | undefined;
+        content?: any;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
 };
 export default _default;
-export { header };
+export { header, layout };

package/build/components/page/index.js

@@ -1,3 +1,4 @@
 import header from './header';
-export default { header };
-export { header };
+import layout from './layout';
+export default { header, layout };
+export { header, layout };

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

@@ -0,0 +1,10 @@
+type Data = {
+    class?: string;
+    content?: any;
+};
+declare const _default: (data?: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/page/layout.js

@@ -0,0 +1,6 @@
+import { html } from '@esportsplus/template';
+export default (data = {}) => html `
+    <section class='page ${data?.class}'>
+        ${data?.content}
+    </section>
+`;

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

@@ -0,0 +1 @@
+export { default as layout } from './layout';

package/build/components/root/index.js

@@ -0,0 +1 @@
+export { default as layout } from './layout';

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

@@ -0,0 +1,19 @@
+type Data = {
+    overlay?: {
+        class?: string;
+        content?: any;
+    };
+    site?: {
+        class?: string;
+        content?: any;
+        scrollbar?: {
+            style?: string;
+        };
+    };
+};
+declare const _default: (data?: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/root/layout.js

@@ -0,0 +1,18 @@
+import { html } from '@esportsplus/template';
+import { scrollbar } from '../../components';
+export default (data = {}) => {
+    let s = scrollbar({
+        fixed: true,
+        style: data?.site?.scrollbar?.style || '--background-default: var(--color-black-400);'
+    });
+    return html `
+        <section class='site ${data?.site?.class || ''}' ${s.attributes}>
+            ${data?.site?.content || ''}
+            ${s.html}
+        </section>
+
+        <section class='overlay ${data?.overlay?.class || ''}'>
+            ${data?.overlay?.content || ''}
+        </section>
+    `;
+};

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

@@ -1,4 +1,12 @@
 declare const _default: {
+    onclick: ({ active, toggle }: {
+        active?: boolean | undefined;
+        toggle?: boolean | undefined;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
     onfocus: (active?: boolean) => {
         content: string;
         type: string;

package/build/components/tooltip/index.js

@@ -1,6 +1,40 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import events from '@esportsplus/delegated-events';
 import menu from './menu';
+let initialized = false, root = [];
+const onclick = ({ active, toggle }) => {
+    if (!initialized) {
+        events.register(document.body, 'click', () => {
+            if (!root.length) {
+                return;
+            }
+            let deactivate = root.splice(0);
+            for (let i = 0, n = deactivate.length; i < n; i++) {
+                deactivate[i].active = false;
+            }
+        });
+        initialized = true;
+    }
+    let state = reactive({
+        active: active || false
+    });
+    return html({
+        class: () => {
+            return `tooltip ${state.active ? '--active' : ''}`;
+        },
+        onclick: function (e) {
+            let active = true;
+            if (toggle && e.target && this.isSameNode(e.target)) {
+                active = !state.active;
+            }
+            state.active = active;
+            if (active) {
+                root.push(state);
+            }
+        }
+    });
+};
 const onfocus = (active = false) => {
     let state = reactive({ active });
     return html({
@@ -29,4 +63,4 @@ const onhover = (active = false) => {
         }
     });
 };
-export default { onfocus, onhover, menu };
+export default { onclick, onfocus, onhover, menu };

package/build/global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.jpg';
+declare module '*.json';
+declare module '*.png';
+declare module '*.svg';
+declare module '*.txt';

package/build/global.js

@@ -0,0 +1 @@
+"use strict";

package/build/index.d.ts

@@ -1 +1,2 @@
+import './types';
 export * from './components';

package/build/index.js

@@ -1 +1,2 @@
+import './types';
 export * from './components';

package/build/types.d.ts

@@ -0,0 +1,5 @@
+declare module '*.jpg';
+declare module '*.json';
+declare module '*.png';
+declare module '*.svg';
+declare module '*.txt';

package/build/types.js

@@ -0,0 +1 @@
+"use strict";

package/index.scss

@@ -0,0 +1,2 @@
+@forward './src/lib';
+@forward './src/tokens';

package/package.json

@@ -1,25 +1,26 @@
 {
     "author": "ICJR",
     "dependencies": {
-        "@esportsplus/action": "^0.0.30",
+        "@esportsplus/action": "^0.0.31",
+        "@esportsplus/delegated-events": "^0.0.16",
         "@esportsplus/reactivity": "^0.0.18",
         "@esportsplus/template": "^0.0.11",
-        "autoprefixer": "^10.4.8",
+        "autoprefixer": "^10.4.13",
         "clean-webpack-plugin": "^4.0.0",
-        "css-loader": "^6.7.1",
-        "css-minimizer-webpack-plugin": "^4.0.0",
-        "cssnano": "^5.1.13",
+        "css-loader": "^6.7.3",
+        "css-minimizer-webpack-plugin": "^4.2.2",
+        "cssnano": "^5.1.14",
         "glob": "^8.0.3",
-        "mini-css-extract-plugin": "^2.6.1",
+        "mini-css-extract-plugin": "^2.7.2",
         "modern-normalize": "^1.1.0",
         "path-browserify": "^1.0.1",
-        "postcss-loader": "^7.0.1",
+        "postcss-loader": "^7.0.2",
         "run-for-every-file": "^1.1.0",
-        "sass": "^1.54.9",
-        "sass-loader": "^13.0.2",
+        "sass": "^1.57.1",
+        "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",
-        "webpack": "^5.74.0",
-        "webpack-cli": "^4.10.0"
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.1"
     },
     "description": "UI",
     "devDependencies": {
@@ -31,10 +32,10 @@
     "private": false,
     "scripts": {
         "build": "tsc && tsc-alias",
-        "-": "-",
+        "--": "--",
         "prepare": "npm run build",
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.16"
+    "version": "0.0.18"
 }

package/src/components/{anchor/scss/anchors.scss → overlay/scss/overlay.scss}

@@ -1,6 +1,6 @@
 @use '~@esportsplus/ui/lib';
 
-.anchors {
+.overlay {
     @include lib.position(fixed, full);
     height: 100vh;
     pointer-events: none;

package/src/components/page/index.ts

@@ -1,5 +1,6 @@
 import header from './header';
+import layout from './layout';
 
 
-export default { header };
-export { header };
+export default { header, layout };
+export { header, layout };

package/src/components/page/layout.ts

@@ -0,0 +1,14 @@
+import { html } from '@esportsplus/template';
+
+
+type Data = {
+    class?: string;
+    content?: any;
+};
+
+
+export default (data: Data = {}) => html`
+    <section class='page ${data?.class}'>
+        ${data?.content}
+    </section>
+`;

package/src/components/root/index.ts

@@ -0,0 +1 @@
+export { default as layout } from './layout';

package/src/components/root/layout.ts

@@ -0,0 +1,36 @@
+import { html } from '@esportsplus/template';
+import { scrollbar } from '~/components';
+
+
+type Data = {
+    overlay?: {
+        class?: string;
+        content?: any;
+    };
+    site?: {
+        class?: string;
+        content?: any;
+        scrollbar?: {
+            style?: string;
+        };
+    };
+};
+
+
+export default (data: Data = {}) => {
+    let s = scrollbar({
+            fixed: true,
+            style: data?.site?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        });
+
+    return html`
+        <section class='site ${data?.site?.class || ''}' ${s.attributes}>
+            ${data?.site?.content || ''}
+            ${s.html}
+        </section>
+
+        <section class='overlay ${data?.overlay?.class || ''}'>
+            ${data?.overlay?.content || ''}
+        </section>
+    `;
+};

package/src/components/tooltip/index.ts

@@ -1,8 +1,53 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import events from '@esportsplus/delegated-events';
 import menu from './menu';
 
 
+let initialized = false,
+    root: { active: boolean }[] = [];
+
+
+const onclick = ({ active, toggle }: { active?: boolean, toggle?: boolean }) => {
+    if (!initialized) {
+        events.register(document.body, 'click', () => {
+            if (!root.length) {
+                return;
+            }
+
+            let deactivate = root.splice(0);
+
+            for (let i = 0, n = deactivate.length; i < n; i++) {
+                deactivate[i].active = false;
+            }
+        });
+        initialized = true;
+    }
+
+    let state = reactive({
+            active: active || false
+        });
+
+    return html({
+        class: () => {
+            return `tooltip ${state.active ? '--active' : ''}`;
+        },
+        onclick: function(this: HTMLElement, e: Event) {
+            let active = true;
+
+            if (toggle && e.target && this.isSameNode(e.target as Node)) {
+                active = !state.active;
+            }
+
+            state.active = active;
+
+            if (active) {
+                root.push(state);
+            }
+        }
+    });
+};
+
 const onfocus = (active: boolean = false) => {
     let state = reactive({ active });
 
@@ -36,4 +81,4 @@ const onhover = (active: boolean = false) => {
 };
 
 
-export default { onfocus, onhover, menu };
+export default { onclick, onfocus, onhover, menu };

package/src/index.ts

@@ -1 +1,4 @@
+import './types';
+
+
 export * from './components';

package/src/types.ts

@@ -0,0 +1,5 @@
+declare module '*.jpg';
+declare module '*.json';
+declare module '*.png';
+declare module '*.svg';
+declare module '*.txt';

package/tsconfig.json

@@ -20,5 +20,5 @@
         "target": "esnext"
     },
     "exclude": ["node_modules"],
-    "include": ["src", "assets.d.ts"]
+    "include": ["src"]
 }

package/lib.scss

@@ -1 +0,0 @@
-@forward 'src/lib';

package/src/assets.d.ts

@@ -1,24 +0,0 @@
-declare module '*.jpg' {
-    const content: any;
-    export default content;
-}
-
-declare module '*.json' {
-    const content: any;
-    export default content;
-}
-
-declare module '*.png' {
-    const content: any;
-    export default content;
-}
-
-declare module '*.svg' {
-    const content: any;
-    export default content;
-}
-
-declare module '*.txt' {
-    const content: any;
-    export default content;
-}

package/src/components/sidebar/scss/sidebars.scss

@@ -1,13 +0,0 @@
-@use '~@esportsplus/ui/lib';
-
-.sidebars {
-    @include lib.position(absolute, full);
-    pointer-events: none;
-    transition: opacity var(--transition-duration) ease-in-out;
-    z-index: 7;
-
-
-    &--fixed {
-        position: fixed;
-    }
-}

package/tokens.scss

@@ -1 +0,0 @@
-@forward 'src/tokens';