@esportsplus/ui 0.0.17 → 0.0.18

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/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": {
@@ -36,5 +37,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.17"
+    "version": "0.0.18"
 }

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 };